/* AI Employee Builders Free — front-door (entry page) styles. Loaded AFTER /assets/aieb-free-pages.css, which stays owned by the workshop pages. Nothing here renames a shared form class: the registration card keeps .formcard / .field / .consent-check / .form-error / .hp exactly as the shared stylesheet and aieb-free-pages.js expect them — only their look is adjusted. Skeleton mirrors the Story OS free page section for section (bold hero with the join form beside it, a numbered white index bar, a three-card training row, alternating text/media sections, two side-by-side benefit cards, a dark join band, full-width FAQ rows). Rendered in the white-excali system: cream paper, ink borders, green accents, Excalifont for accents only, white cards where Story OS uses dark ones, and the single sanctioned dark .band. Portal vocabulary is inherited: brand block, dashed rules, orange live accent, purple reading accent. New classes are namespaced `fd-`/`mc-`. */ /* ---- local tokens (page tokens are declared in the document head) ----- */ :root{ --line:#E2E2DC; --blue:#3C6FA8; --blue-soft:#E4EDF7; --purple:#7B5AA0; --purple-soft:#EDE5F2; --orange:#C2410C; --orange-soft:#FDECDD; --red:#B3402A; --red-soft:#F8E5E2; --gold:#946A00; --gold-soft:#FBF0D4; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace; --corner:15px 4px 15px 4px; --topbar:64px; --shadow:4px 5px 0 rgba(33,33,30,.10); /* Measured sticky chrome. The fallbacks below are the rendered heights, so anchor offsets are already correct before the inline script runs; the script then rewrites both from getBoundingClientRect on load and resize. --fd-top-h = the sticky header. --fd-chrome = header + index bar when the index bar is sticky too (mobile and >=900px both stick it). */ --fd-top-h:68px; --fd-chrome:114px; } @media (min-width:900px){ :root{--fd-top-h:77px;--fd-chrome:137px} } body{font-size:18px} /* Every Excalifont accent on this page, declared in one place, so no body paragraph can pick the hand font up by accident. */ .brand-word,.tag,.fd-index .n,.fd-kicker,.mc-kicker,.fd-num,.fd-foot-mark, h1 em,.fd-h2 em,.fd-h3 em,.btn,.fd-live-tag,.mc-watch, .pl-badge,.pl-label,.pl-free,.pl-example,.pl-close{font-family:'Excalifont',system-ui,sans-serif} /* ---- visually hidden (labels the form keeps for assistive tech) ------- */ .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- layout shell ----------------------------------------------------- */ .fd-w{max-width:1180px;margin:0 auto;padding:56px 18px} .fd-measure{max-width:640px} /* Every in-page anchor clears the full stack of sticky chrome, so a jump never lands a heading underneath the header or the index bar. */ .fd-sec,#join{scroll-margin-top:calc(var(--fd-chrome) + 14px)} .fd-center{text-align:center;max-width:820px;margin:0 auto} .fd-center .fd-sub{margin-left:auto;margin-right:auto} /* ---- top bar ---------------------------------------------------------- */ .fd-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:var(--topbar);padding:9px 18px;background:var(--paper);border-bottom:1.5px solid var(--line)} .brand-block{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)} .brand-block img{width:34px;height:34px;flex:none;display:block} .brand-word{display:block;font-size:12px;letter-spacing:.09em;line-height:1.18;color:var(--ink);max-width:148px} .tag{display:inline-block;margin-top:3px;padding:1px 7px;border:1.5px solid var(--green);border-radius:8px 3px 8px 3px; background:var(--green-soft);color:var(--green);font-size:10px;letter-spacing:.1em} .fd-top-actions{display:flex;align-items:center;gap:20px} .fd-signin{color:var(--soft);font-size:14.5px;text-decoration:none;white-space:nowrap} .fd-signin:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px} .fd-joinlink{color:var(--ink);font-size:15.5px;font-weight:700;text-decoration:none;white-space:nowrap} .fd-joinlink:hover{color:var(--green)} /* ---- section index bar (Story OS: white, divided, numbered) ----------- */ .fd-index{background:var(--card);border-bottom:1.5px solid var(--line); overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; scroll-snap-type:x proximity;scroll-padding-inline:14px} .fd-index::-webkit-scrollbar{display:none} .fd-index ul{display:flex;list-style:none;margin:0 auto;padding:0;width:max-content;min-width:100%} .fd-index li{flex:1 0 auto;display:flex;scroll-snap-align:start} .fd-index a{display:flex;align-items:center;gap:10px;width:100%;padding:17px 22px;color:var(--ink);text-decoration:none; font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap; border-left:1.5px solid var(--line)} .fd-index li:first-child a{border-left:0} .fd-index .n{color:var(--green);font-size:15px;font-weight:400;letter-spacing:.04em} .fd-index a:hover{background:var(--green-soft)} /* The section currently in view. aria-current is the semantic carrier; the tint and the green rule are what a sighted reader sees. */ .fd-index a[aria-current]{background:var(--green-soft);color:var(--green);box-shadow:inset 0 -3px 0 var(--green)} .fd-index a[aria-current] .n{color:var(--green)} /* ---- type ------------------------------------------------------------- */ .fd-kicker{display:block;color:var(--green);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px} .fd-kicker.watch{color:var(--blue)} .fd-kicker.read{color:var(--purple)} .fd-kicker.live{color:var(--orange)} .fd-kicker.gold{color:var(--gold)} .fd-h2{font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.08;color:var(--ink);text-wrap:balance;margin-bottom:16px} .fd-h2 em{font-style:normal;color:var(--green);font-weight:400;font-size:.94em} .fd-h3{font-size:clamp(25px,2.6vw,33px);font-weight:700;line-height:1.14;color:var(--ink);text-wrap:balance;margin-bottom:10px} .fd-h3 em{font-style:normal;color:var(--green);font-weight:400} .fd-sub{font-size:18.5px;line-height:1.6;color:var(--body);max-width:640px} .fd-cap{color:var(--soft);font-size:13.5px;line-height:1.5;margin-top:11px;max-width:560px} .fd-cta{margin-top:28px} .fd-cta .btn{padding:15px 30px;font-size:18px} .fd-get{margin-top:24px;max-width:640px} ul.walk li{font-size:16.5px} /* ---- hero ------------------------------------------------------------- */ .fd-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start;padding-top:8px} .fd-hero h1{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:clamp(44px,6.2vw,72px); font-weight:800;line-height:1.02;letter-spacing:-.01em;color:var(--ink);margin-top:6px} .fd-hero h1 em{display:block;font-style:normal;color:var(--green);font-weight:400;font-size:.9em;line-height:1.08;margin-top:4px} .fd-hero .fd-lede{font-size:20.5px;line-height:1.5;color:var(--body);margin-top:22px;max-width:33em} /* ---- the join card (Story OS shape, our contract) --------------------- */ .fd-hero .formcard{padding:24px 22px} .fd-cardtitle{font-size:21px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:16px} .fd-hero .formcard .field{margin-bottom:12px} .fd-hero .formcard .field input,.fd-hero .formcard .field select{padding:15px 16px;border-radius:12px 4px 12px 4px;font-size:16px} .fd-hero .formcard .field input::placeholder{color:#9A9A92} .fd-hero .formcard select{color:var(--ink)} .fd-hero .formcard select:invalid{color:#9A9A92} /* The required consent control. Native and the shared .consent-check structure are untouched — only the box and the hit row grow, from an 18px default to a 22px box inside a 44px-tall label. */ .fd-hero .formcard .consent-check{background:transparent;border:0;border-radius:0;padding:0;margin:16px 0 18px; grid-template-columns:22px minmax(0,1fr);gap:12px;min-height:44px;font-size:13px;line-height:1.5;color:var(--soft)} .fd-hero .formcard .consent-check input{width:22px;height:22px;flex:none;margin-top:1px} .fd-hero .formcard .btn{width:100%;min-height:56px;font-size:19px;margin-top:0} .fd-formfoot{font-size:13px;line-height:1.55;color:var(--soft);margin-top:12px} .fd-formfoot a{color:var(--soft);text-decoration:underline;text-underline-offset:3px} .fd-formfoot a:hover{color:var(--green)} /* ---- masterclass cards (Story OS's three-training row) --------------- */ .mc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:38px} .mc-card{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink); border-radius:var(--corner);box-shadow:var(--shadow);overflow:hidden} .mc-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--green-soft);border-bottom:2px solid var(--ink)} .mc-thumb img{display:block;width:100%;height:100%;object-fit:cover} .mc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px; border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.93);display:grid;place-items:center; transition:transform .15s ease} .mc-play::before{content:"";display:block;width:0;height:0;margin-left:5px; border-left:16px solid var(--green);border-top:10px solid transparent;border-bottom:10px solid transparent} .mc-card:hover .mc-play{transform:translate(-50%,-50%) scale(1.07)} .mc-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px} .mc-kicker{display:block;color:var(--green);font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px} .mc-title{font-size:19.5px;font-weight:700;line-height:1.3;color:var(--ink);margin-bottom:12px} .mc-discover{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px} .mc-body ul.walk li{font-size:15px;line-height:1.5;padding:10px 0 10px 27px} .mc-body ul.walk li::before{top:9px} .mc-watch{display:inline-block;margin-top:auto;padding-top:18px;color:var(--green);font-size:16px; text-decoration:none;letter-spacing:.02em} .mc-watch:hover{text-decoration:underline;text-underline-offset:4px} /* ---- alternating text / media sections -------------------------------- */ .fd-split{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center} /* Explicit per-child centring: the media column is much shorter than its text column, so it is levelled against it and capped so it never drifts wide. */ .fd-split>*{align-self:center} .fd-media{width:100%;max-width:560px;margin-inline:auto} .fd-frame{background:var(--card);border:2px solid var(--ink);border-radius:var(--corner);overflow:hidden;box-shadow:var(--shadow)} .fd-frame-bar{display:flex;align-items:center;gap:7px;height:28px;padding:0 13px;background:var(--paper);border-bottom:1.5px solid var(--ink)} .fd-frame-bar i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);background:var(--card)} .fd-frame img{display:block;width:100%;height:auto} .fd-frame .fd-frame-body{padding:18px 16px} .fd-media-169{position:relative;aspect-ratio:16/9;overflow:hidden} .fd-media-169 img{width:100%;height:100%;object-fit:cover;object-position:50% 16%} .fd-live-tag{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px; border:1.5px solid var(--orange);border-radius:9px 3px 9px 3px;background:var(--orange-soft);color:var(--orange); font-size:12px;letter-spacing:.1em} .fd-live-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)} .fd-next{margin-top:24px;padding:16px 18px;border:1.5px dashed var(--orange);border-radius:12px; background:var(--orange-soft);font-size:15.5px;line-height:1.55;color:var(--body);max-width:640px} .fd-quiet{display:inline-block;margin-top:10px;color:var(--body);font-size:14.5px;text-underline-offset:3px} .fd-quiet:hover{color:var(--green)} /* ---- 02 · the plugin showcase ----------------------------------------- */ /* Row A's product slot is a marketplace-style LISTING, not a screenshot: a mark, a name, what kind of thing it is, where it installs, and what ships inside it. Green here means one thing only — free — so the FREE tags and the account badge carry it and nothing else does. */ .pl-col{width:100%;max-width:560px;margin-inline:auto;min-width:0} .pl-listing{background:var(--card);border:2px solid var(--ink);border-radius:var(--corner); box-shadow:var(--shadow);padding:20px 19px 19px} .pl-head{display:flex;flex-wrap:wrap;align-items:center;gap:13px} .pl-mark{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--green-soft); border:2px solid var(--ink);border-radius:16px 5px 16px 5px} .pl-mark img{display:block;width:34px;height:34px} .pl-headmeta{flex:1 1 170px;min-width:0} .pl-name{font-size:20.5px;font-weight:700;line-height:1.2;color:var(--ink)} .pl-type{font-size:14px;line-height:1.4;color:var(--body);margin-top:3px} .pl-pub{font-size:13px;line-height:1.4;color:var(--soft);margin-top:2px} .pl-badge{flex:none;padding:5px 11px;border:1.5px solid var(--green);border-radius:9px 3px 9px 3px; background:var(--green-soft);color:var(--green);font-size:12px;letter-spacing:.06em} .pl-block{margin-top:17px;padding-top:16px;border-top:1.5px dashed var(--line)} .pl-label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:11px} .pl-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .pl-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:var(--paper); border:1.5px solid var(--line);border-radius:10px 3px 10px 3px;font-size:14px;line-height:1.2;color:var(--ink)} .pl-glyph{display:block;width:16px;height:16px} .pl-glyph svg{display:block;width:16px;height:16px;fill:none;stroke:var(--soft);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .pl-skills{display:grid;gap:11px;list-style:none;margin:0;padding:0} .pl-skill{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;padding:13px 13px; background:var(--paper);border:1.5px dashed var(--line);border-radius:12px 4px 12px 4px} .pl-sglyph{width:34px;height:34px;display:grid;place-items:center;background:var(--card); border:1.5px solid var(--ink);border-radius:11px 4px 11px 4px} .pl-sglyph svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .pl-sbody{min-width:0} .pl-sname{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:16px;font-weight:700; line-height:1.3;color:var(--ink)} .pl-id{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--body);background:var(--card); border:1.5px solid var(--line);border-radius:7px 2px 7px 2px;padding:2px 7px} .pl-free{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green); background:var(--green-soft);border:1.5px solid var(--green);border-radius:7px 2px 7px 2px;padding:2px 7px} .pl-sdesc{font-size:14.5px;line-height:1.5;color:var(--body);margin-top:6px} .pl-stry{font-size:13.5px;line-height:1.5;color:var(--soft);margin-top:5px;font-style:italic} .pl-foot{margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--line); font-size:13.5px;line-height:1.5;color:var(--soft)} /* ---- 02 row B · one map, opened ---------------------------------------- */ .pl-rowb{margin-top:46px;padding-top:34px;border-top:1.5px dashed var(--line)} .pl-rowb-head{max-width:640px;margin-bottom:24px} .pl-rowb-head .fd-sub{font-size:17px} .pl-rowb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start} .pl-chat{align-self:start;min-width:0} .pl-example{margin-left:auto;padding:1px 8px;background:var(--card);border:1.5px dashed var(--line); border-radius:7px 2px 7px 2px;color:var(--soft);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .pl-chat-body{display:grid;gap:11px;padding:16px 15px 18px} .pl-bubble{justify-self:end;max-width:88%;padding:9px 12px;background:var(--green-soft); border:1.5px solid var(--green);border-radius:13px 4px 13px 4px;font-size:15px;line-height:1.4;color:var(--ink)} .pl-say{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--body)} .pl-say::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--line)} .pl-say-done{color:var(--ink);font-weight:600} .pl-say-done::before{background:var(--green)} .pl-gallery{display:grid;gap:16px;min-width:0} .pl-tile{margin:0;min-width:0} .pl-shot{display:block;width:100%;min-height:44px;padding:0;overflow:hidden;cursor:zoom-in; background:var(--card);border:2px solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease} .pl-shot img{display:block;width:100%;height:auto} .pl-shot:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 rgba(33,33,30,.12)} .pl-tile figcaption{margin-top:9px;font-size:13px;line-height:1.5;color:var(--soft)} /* Mobile: the four smaller pages ride a snap strip inside their own scroller, so they never widen the page itself. */ .pl-strip{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px} .pl-strip>.pl-tile{scroll-snap-align:start} /* The four pages have four different aspect ratios. Boxing them to one ratio, anchored to the top of each page, keeps the tile row level and lines the four captions up on the same baseline. */ .pl-strip .pl-shot img{aspect-ratio:4/3;object-fit:cover;object-position:top center} .pl-gallery-cap{margin-top:18px;max-width:640px} /* ---- the map lightbox -------------------------------------------------- */ /* margin:auto is restored explicitly — the shared `*{margin:0}` reset wipes the UA rule that centres a modal . */ .pl-lightbox{margin:auto;max-width:min(96vw,1400px);max-height:96vh;padding:0;border:0; background:transparent;overflow:visible} .pl-lightbox::backdrop{background:rgba(33,33,30,.62)} /* Grid, not a scroller: the page is height-capped so Close and the caption stay on screen at every viewport instead of scrolling out of the dialog. The image is allowed the full 92vw / 88vh the map actually needs to be readable. */ .pl-lightbox-in{display:grid;gap:11px;max-height:96vh;padding:13px;background:var(--card); border:2px solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow)} .pl-lightbox-top{display:flex;justify-content:flex-end} .pl-lightbox-in img{display:block;width:100%;height:auto;max-width:92vw; max-height:min(88vh,calc(96vh - 130px));object-fit:contain; border:1.5px solid var(--line);border-radius:8px} .pl-close{min-height:44px;min-width:44px;padding:0 15px;cursor:pointer; background:var(--card);border:2px solid var(--ink);border-radius:10px 3px 10px 3px;color:var(--ink);font-size:15px} .pl-close:hover{background:var(--green-soft);color:var(--green)} .pl-lightbox-cap{margin-top:13px;font-size:14px;line-height:1.5;color:var(--soft)} /* ---- two side-by-side benefit cards ----------------------------------- */ .fd-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:8px} .fd-duo-card{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink); border-radius:var(--corner);box-shadow:var(--shadow);padding:26px 24px 28px} .fd-icon{width:46px;height:46px;display:grid;place-items:center;border:2px solid var(--ink); border-radius:14px 5px 14px 5px;background:var(--green-soft);margin-bottom:16px} .fd-icon svg{width:23px;height:23px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .fd-icon.read{background:var(--purple-soft)} .fd-icon.read svg{stroke:var(--purple)} /* gold = premium / member-only, the one thing on this page that is not universal */ .fd-icon.gold{background:var(--gold-soft)} .fd-icon.gold svg{stroke:var(--gold)} /* The offers checklist is the only gold-tinted list on the page — the rows carry the member-only tier the same way the icon and kicker do. */ /* Card 04 is shorter than card 05, which carries a screenshot. Rather than leave a hole under the checklist, the rows take the spare height and sit centred between the heading and the CTA, so both cards still end level. */ #offers ul.walk{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;margin-top:14px} #offers ul.walk li{margin-bottom:0;padding:14px 15px 14px 40px;background:var(--gold-soft); border:1.5px dashed var(--gold);border-bottom:1.5px dashed var(--gold);border-radius:12px 4px 12px 4px;color:var(--ink)} #offers ul.walk li:last-child{border-bottom:1.5px dashed var(--gold)} #offers ul.walk li::before{left:15px;top:13px;color:var(--gold)} .fd-duo-card h3{font-size:23px;font-weight:700;line-height:1.22;color:var(--ink);margin-bottom:12px} .fd-duo-card p{font-size:16px;line-height:1.6;color:var(--body)} .fd-duo-card ul.walk{margin-top:6px} .fd-duo-card ul.walk li{font-size:15.5px;padding:11px 0 11px 28px} .fd-duo-card ul.walk li::before{top:10px} .fd-duo-card .fd-cta{margin-top:auto;padding-top:18px} .fd-duo-card .fd-cta .btn{font-size:17px;padding:13px 24px} .fd-inset{margin-top:18px} .fd-inset .fd-frame img{max-height:250px;object-fit:cover;object-position:top left} .fd-inset .fd-frame{box-shadow:3px 4px 0 rgba(33,33,30,.08)} /* Card 05 shows the REAL Previous-emails list instead of a ghost skeleton. It is cropped to its top so the shot reads as a window onto a longer list rather than a squashed whole page, and so the card stays level with card 04. */ .fd-inset-emails{margin-top:auto;padding-top:14px} .fd-inset-emails .fd-frame img{max-height:260px;object-position:top left} /* ---- the exchange two-state ------------------------------------------ */ .access-rule{margin-top:28px} /* ---- dark join band (the ONE sanctioned dark surface) ----------------- */ .fd-band-wrap{padding-top:10px} .band{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;background:var(--ink);color:#D9D9D4; border-radius:18px;padding:34px 26px} .band .fd-kicker{color:#7BD389} .band h2{color:#FFFFFF;font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.06;margin-bottom:14px} .band p{color:#D9D9D4;font-size:17px;line-height:1.6;max-width:44ch} .band ul.walk{margin-top:20px} .band ul.walk li{color:#D9D9D4;border-bottom:1.5px dashed #3D3D38;font-size:16.5px} .band ul.walk li:last-child{border-bottom:none} .band ul.walk li::before{color:#7BD389} /* The second band list is the inclusion set — short items, so they run compact and rule-less beneath the diagnostic checklist instead of repeating its rows. */ .band ul.walk.compact{display:grid;gap:2px 22px;margin-top:18px;padding-top:16px;border-top:1.5px dashed #3D3D38} .band ul.walk.compact li{border-bottom:none;padding:5px 0 5px 28px;font-size:15.5px} .band ul.walk.compact li::before{top:4px} .band-card{background:var(--card);border:2px solid #7BD389;border-radius:var(--corner);padding:26px 24px;align-self:center} .band-card h3{font-size:21px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:14px} .band-card p{color:var(--body);font-size:15.5px;line-height:1.55;max-width:none} .band-card .btn{width:100%;min-height:56px;font-size:19px;margin-top:4px} .band-card .micro{color:var(--soft);font-size:13px;line-height:1.55;margin-top:14px} .band-card .micro a{color:var(--soft);text-decoration:underline;text-underline-offset:3px} .band-card .micro a:hover{color:var(--green)} /* ---- FAQ (Story OS: full-width rows, dashed rules, rotating +) -------- */ .fd-faqs{margin-top:26px;border-top:1.5px dashed var(--line)} details.faq{border:0;border-bottom:1.5px dashed var(--line);background:none;border-radius:0;margin:0;overflow:visible} details.faq summary{cursor:pointer;list-style:none;position:relative;padding:24px 56px 24px 0; font-size:20px;font-weight:700;color:var(--ink);line-height:1.35} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+";position:absolute;right:8px;top:18px;color:var(--green);font-size:28px; line-height:1;transition:transform .2s ease;transform-origin:50% 50%} details.faq[open] summary::after{transform:rotate(45deg)} details.faq .a{padding:0 56px 24px 0;font-size:16.5px;line-height:1.65;color:var(--body);max-width:760px} /* ---- footer ----------------------------------------------------------- */ .fd-foot{max-width:1180px;margin:0 auto;padding:30px 18px 54px;border-top:1.5px solid var(--line); display:grid;gap:14px} .fd-foot-brand{display:flex;align-items:center;gap:11px} .fd-foot-brand img{width:30px;height:30px;display:block} .fd-foot-mark{color:var(--ink);font-size:12px;letter-spacing:.09em;line-height:1.2} .fd-foot-tag{color:var(--soft);font-size:14.5px;line-height:1.55;max-width:560px} .fd-foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px} .fd-foot-links a{color:var(--soft);text-decoration:none} .fd-foot-links a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px} /* ---- widen ------------------------------------------------------------ */ @media (min-width:640px){ .ghost-articles{grid-template-columns:repeat(2,minmax(0,1fr))} .band ul.walk.compact{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:760px){ /* enough room for the four page tiles to sit as a real row, so the scroller and its snap points are only ever a small-screen affordance */ .pl-strip{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible;scroll-snap-type:none;padding-bottom:0} } @media (min-width:820px){ .mc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .fd-duo{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:900px){ .fd-w{padding:84px 24px} .fd-top{padding:9px 28px} .fd-index{position:sticky;top:var(--fd-top-h);z-index:30} .fd-index ul{width:auto;min-width:0;max-width:1180px;padding:0 24px} .fd-sec,#join{scroll-margin-top:calc(var(--fd-chrome) + 14px)} .fd-hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;padding-top:24px;padding-bottom:12px} .fd-hero .formcard{padding:28px 26px;position:relative;top:6px} .fd-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px} .pl-rowb-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:34px} .band{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;padding:48px 44px} .fd-foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 32px} .fd-foot-links{justify-content:flex-end} } @media (max-width:899px){ .fd-hero{padding-top:4px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn,.mc-play,details.faq summary::after,.pl-shot{transition:none} .pl-shot:hover{transform:none} .pl-strip{scroll-behavior:auto} } /* ---- review fixes 2026-09-19: comfortable tap targets on standalone text links ---- */ .fd-top-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} .fd-foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} a.fd-quiet{display:inline-flex;align-items:center;min-height:44px} /* Terms / Privacy under the form and in the dark band: 0px apart and 17px tall before this. The margin supplies the inter-target gap the pair lacked. */ .fd-formfoot a,.band-card .micro a{display:inline-flex;align-items:center;min-height:40px; padding:0 4px;margin:0 4px} /* Held together so the pair never splits across two text lines: 40px-tall tap boxes on a 22px line pitch would otherwise overlap each other. */ .fd-legal-pair{white-space:nowrap} /* trim the trailing gutter so the sentence's full stop still reads as attached */ .fd-legal-pair a:last-of-type{margin-right:0} /* The primary top-bar label swaps to a short form on narrow phones so a returning member's "Sign in" can share the bar. The approved wording stays in the DOM and stays the link's accessible name; only the printed characters shorten. */ .fd-join-short{display:none} /* ====================================================================== MOBILE PASS — 2026-09-19 mobile audit (LANDING findings H4 · H5 · H6 · H7 · M10 · M15 · L16 · L18 · §3.4 above-the-fold geometry). Nothing here changes a word of copy, a heading level, or section order. ====================================================================== */ @media (max-width:899px){ /* ---- H5 · a returning member can sign in from the top bar ------------ The bar now carries both actions, so the widths are re-budgeted: a tighter brand column, a 10px action gap, and the short join label below 420px. At 360 the row measures well inside the viewport and neither link wraps. */ .fd-top{padding:5px 14px;min-height:56px} .brand-word{line-height:1.12} .tag{margin-top:2px;padding:0 7px} .fd-top-actions{gap:10px} .fd-signin{font-size:14px} .fd-joinlink{font-size:14.5px} /* ---- H6 · the index bar is discoverable and persistent --------------- Sticky under the header, a fade on the scrolling edge, snap points and narrower items so a further item always peeks. Header 68 + bar 45.5 = 113.5px of sticky chrome, 13.4% of an 844px viewport. */ .fd-index{position:sticky;top:var(--fd-top-h);z-index:30; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent)} .fd-index.is-scrolled{ -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 42px),transparent); mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 42px),transparent)} .fd-index.is-end{ -webkit-mask-image:linear-gradient(to right,transparent,#000 28px); mask-image:linear-gradient(to right,transparent,#000 28px)} .fd-index ul{padding-right:34px} .fd-index a{min-height:44px;padding:0 14px;gap:8px} /* ---- §3.4 · the hero above the fold --------------------------------- Only spacing and type scale move. At 390 the card heading and the first two fields clear the fold; the top-bar CTA stays the persistent action. */ #main > .fd-w:first-child{padding-top:20px;padding-bottom:34px} .fd-hero{gap:22px} .fd-hero .fd-lede{font-size:17px;margin-top:16px} .fd-hero .formcard{padding:16px} .fd-cardtitle{font-size:20px;margin-bottom:12px} .fd-hero .formcard .field{margin-bottom:10px} .fd-hero .formcard .field input, .fd-hero .formcard .field select{min-height:52px;padding:13px 14px} /* ---- M10 · the consent row is a 44px tap row with a 22px box -------- Native kept, .consent-check structure kept — the shared JS reads `consent` off the form, and nothing here renames it. */ .fd-hero .formcard .consent-check{grid-template-columns:22px minmax(0,1fr);gap:12px; min-height:44px;align-items:start;padding:10px 0;margin:12px 0 14px;font-size:14px} .fd-hero .formcard .consent-check input{width:22px;height:22px;margin-top:1px;flex:none} /* ---- L18 · the small-label family ------------------------------------ Uppercase letterspaced labels to 12.5px; sentence-case small copy to 14px. */ .tag{font-size:12.5px} .brand-word{font-size:12.5px} .mc-kicker,.pl-label,.pl-free,.pl-example,.fd-live-tag,.fd-foot-mark{font-size:12.5px} .pl-badge,.pl-id,.pl-pub,.pl-stry,.pl-foot,.fd-cap,.fd-formfoot, .band-card .micro,.pl-tile figcaption,.fd-foot-links{font-size:14px} } @media (max-width:420px){ .fd-top{padding:5px 12px} .brand-word{max-width:104px} .fd-joinlink{font-size:14px} /* H5 · the short primary label buys the room "Sign in" needs */ .fd-join-full{display:none} .fd-join-short{display:inline} } /* ---- §3.4 · the headline takes four lines at 360 ---------------------- Scoped below 390 so the 44px floor the desktop/390 contract asserts is untouched; at 360 the clamp's lower bound would otherwise run to five. */ @media (max-width:389px){ .fd-hero h1{font-size:40px} } /* ---- H7 · the map lightbox is a full-bleed viewer on phones ------------ 344x173 before this — smaller than the 354px tile that opened it. Now the image is the full viewport width inside a scrollable, pinch-zoomable container, with Close pinned at 44x44 top-right. Escape, backdrop click and focus return are untouched. */ @media (max-width:760px){ /* inset:0 rather than width:100vw — a modal is already fixed, and insetting it to the initial containing block gives exactly the viewport box without 100vw's scrollbar-width overshoot (which would read as overflow). */ .pl-lightbox{inset:0;width:auto;max-width:100vw;height:auto;max-height:100dvh; margin:0;padding:0;border:0;border-radius:0;background:var(--ink)} .pl-lightbox::backdrop{background:var(--ink)} .pl-lightbox-in{height:100%;max-height:none;padding:0;gap:0;border:0;border-radius:0; box-shadow:none;background:var(--ink);align-content:center; overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .pl-lightbox-in>img{width:100%;height:auto;max-width:none;max-height:none; border:0;border-radius:0;touch-action:pinch-zoom} .pl-lightbox-top{position:fixed;top:10px;right:10px;z-index:2} .pl-close{width:44px;height:44px;min-width:44px;min-height:44px;padding:0; display:grid;place-items:center;font-size:13px; background:var(--card);border:2px solid var(--ink)} .pl-lightbox-cap{margin:0;padding:14px 16px 26px;color:#D9D9D4;font-size:14px} } @media (prefers-reduced-motion:reduce){ .fd-index{scroll-behavior:auto} } /* ====================================================================== WELCOME PAGE — /aieb-free/welcome/ (added 2026-09-20) The screen a person lands on the second after they create their free account. One job: get the one-word reply sent. Every selector below is namespaced `wl-`; nothing above this line is changed. Shared vocabulary (.fd-top, .btn, .card shape, ul.walk, .fd-foot, .fd-frame, .vh, .reveal) is reused as-is so this page and the landing page read as one site. ====================================================================== */ /* ---- layout shell ----------------------------------------------------- */ .wl-sec{max-width:880px;margin:0 auto;padding:34px 18px} .wl-sec-tight{padding-top:14px;padding-bottom:14px} .wl-sec-tight:last-of-type{padding-bottom:34px} /* ---- hero ------------------------------------------------------------- */ .wl-hero{text-align:center;padding-top:20px;padding-bottom:6px} .wl-hero h1{font-size:clamp(33px,5.2vw,52px);line-height:1.1;letter-spacing:-.01em;margin:0 auto;max-width:15em} /* Inline, not block: "Reply AI" sits inside the sentence it belongs to. Held on one line — it is the instruction, and "Reply" / "AI" split across a line break stops reading as a single phrase. */ .wl-hero h1 em{display:inline;font-style:normal;color:var(--green);font-weight:400;white-space:nowrap} .wl-hero .fd-sub{margin:16px auto 0;max-width:34em} /* ---- the drawn reply -------------------------------------------------- */ .wl-mailwrap{max-width:520px;margin:28px auto 0} .wl-mail .fd-frame-bar{justify-content:flex-start} .wl-mail-tag{margin-left:auto;font-family:'Excalifont',system-ui,sans-serif;font-size:12.5px;color:var(--soft)} .wl-mail-body{padding:14px 18px 18px;text-align:left} .wl-mail-row{display:flex;align-items:center;gap:10px;margin:0;padding:10px 0;border-bottom:1.5px dashed var(--line)} /* 78px, not 60: "SUBJECT" in Excalifont at .1em tracking overruns a 60px column and collides with the "Re:" beside it. */ .wl-mail-k{flex:none;width:78px;font-family:'Excalifont',system-ui,sans-serif;font-size:12.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--soft)} .wl-mail-v{font-size:16.5px;color:var(--ink)} .wl-mail-bar{flex:1 1 auto;height:10px;min-width:60px;border-radius:6px;background:var(--line)} /* Fixed height so the blinking caret can never move anything around it. */ .wl-mail-msg{display:flex;align-items:center;gap:3px;height:104px;padding-left:2px} .wl-mail-word{font-family:'Excalifont',system-ui,sans-serif;font-size:46px;line-height:1;color:var(--ink)} .wl-caret{display:block;flex:none;width:3px;height:42px;background:var(--ink); animation:wl-blink 1.1s steps(1,end) infinite} @keyframes wl-blink{0%,49%{opacity:1}50%,100%{opacity:0}} .wl-mail-send{margin:0;padding-top:4px} .wl-sendbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#FFFFFF; border:2px solid var(--ink);border-radius:var(--sketch);padding:9px 28px; font-family:'Excalifont',system-ui,sans-serif;font-size:17px;box-shadow:3px 4px 0 rgba(33,33,30,.35)} /* ---- the three steps -------------------------------------------------- */ .wl-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .wl-step{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink); border-radius:var(--corner);padding:20px 20px 22px;box-shadow:var(--shadow)} .wl-n{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-bottom:13px; background:var(--green-soft);border:2px solid var(--ink);border-radius:50%; font-family:'Excalifont',system-ui,sans-serif;font-size:21px;color:var(--green)} .wl-step h2{font-size:19.5px;line-height:1.3;margin-bottom:7px} .wl-step p{font-size:16px;line-height:1.55;color:var(--body);margin-bottom:0} .wl-step-act{margin-top:auto;padding-top:18px} .wl-step-act .btn{padding:12px 24px;font-size:17px} /* ---- the two explanation cards ---------------------------------------- */ /* align-items:start — the two cards hold different amounts of copy, and stretching the shorter one leaves a bordered box with dead space in it. */ .wl-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start} .wl-card{background:var(--card);border:2px solid var(--ink);border-radius:var(--corner); padding:22px 22px 24px;box-shadow:var(--shadow)} .wl-card h2{font-size:21px;line-height:1.3;margin-bottom:10px} .wl-card p{font-size:16.5px;line-height:1.6;margin-bottom:0} .wl-card ul.walk{margin-top:2px} .wl-card ul.walk li{font-size:16px} /* ---- members-only teaser (gold = premium; hidden until the checkout lives) */ .wl-teaser{max-width:660px;margin:0 auto;background:var(--gold-soft);border:2px solid var(--gold); border-radius:var(--corner);padding:22px 22px 24px;box-shadow:4px 5px 0 rgba(148,106,0,.14)} .wl-teaser h2{font-size:20px;line-height:1.3;color:var(--ink);margin-bottom:10px} .wl-teaser-lead{font-size:18px;line-height:1.5;color:var(--ink);font-weight:700;margin-bottom:8px} .wl-teaser-fine{font-size:16px;line-height:1.55;color:var(--body);margin-bottom:8px} .wl-teaser-where{font-size:16px;line-height:1.55;color:var(--body);margin-bottom:0} /* ---- while you wait --------------------------------------------------- */ .wl-wait{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center; background:var(--card);border:2px solid var(--ink);border-radius:var(--corner); padding:22px;box-shadow:var(--shadow)} .wl-wait h2{font-size:20px;line-height:1.3;margin-bottom:6px} .wl-wait p{font-size:16.5px;line-height:1.55;margin-bottom:0} .wl-wait-act{margin:0} .wl-wait-act .btn{width:100%} /* ---- the help line ---------------------------------------------------- */ /* One link in the paragraph, so its 44px tap box has no sibling target to collide with and the line pitch stays normal reading rhythm. */ .wl-help{max-width:720px;margin:22px auto 0;text-align:center; font-size:16.5px;line-height:1.95;color:var(--soft);text-wrap:pretty} .wl-help a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px; color:var(--green);text-underline-offset:3px} /* ---- widen ------------------------------------------------------------ */ @media (min-width:700px){ .wl-wait{grid-template-columns:minmax(0,1fr) auto;gap:26px} .wl-wait-act .btn{width:auto;white-space:nowrap} } @media (min-width:820px){ .wl-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .wl-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} } @media (min-width:900px){ .wl-sec{padding:44px 24px} .wl-sec-tight{padding-top:18px;padding-bottom:18px} .wl-sec-tight:last-of-type{padding-bottom:48px} .wl-hero{padding-top:34px} } @media (prefers-reduced-motion:reduce){ .wl-caret{animation:none;opacity:1} .wl-sendbtn{transition:none} } /* ====================================================================== JOIN FORM v2 — the two tap-card questions (appended 2026-09-21) ---------------------------------------------------------------------- Replaces the free-text "recurring work" field and the "I want…" dropdown on /aieb-free/ only. Real / controls sit inside the