@charset "UTF-8"; /* Confidence Labs — house style. Cream field, ink type, one accent per app. Taste laws: minimal + instantly obvious. No gradients, no glows, no italics. */ :root{ --paper:#FAF7F2; /* cream field */ --cream:#F7EBC8; /* warm panel tint */ --ink:#221D16; /* warm ink */ --ink-2:#5C544A; /* secondary text */ --line:#E7DFD2; /* hairline borders */ --card:#FFFFFF; --sales:#0B6E4F; /* green */ --interview:#2450A4; /* blue */ --social:#B4552D; /* terracotta */ --accent:var(--ink); /* per-page override on */ --ink-body:#3A342C; /* argument copy — darker than ink-2 */ --radius:14px; --maxw:1200px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{overflow-x:clip} /* nothing may widen the phone viewport (clip keeps sticky alive) */ body{ background:var(--paper);color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } /* house type: Archivo (headlines) + JetBrains Mono (kickers) — same as the store-shot rigs */ h1,h2,h3,.brand{font-family:"Archivo",-apple-system,"Segoe UI",sans-serif} .kicker,.step .n{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;display:block} /* type */ h1,h2,h3{font-weight:800} h1{letter-spacing:-.02em;line-height:1.08} h2{letter-spacing:-.015em;line-height:1.15} h1{font-size:clamp(34px,5.2vw,58px)} h2{font-size:clamp(24px,3.2vw,34px)} h3{font-size:19px;font-weight:700;letter-spacing:0;line-height:1.3} .sub{color:var(--ink-2);font-size:clamp(17px,2vw,20px);max-width:34em} .kicker{ font:600 12px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em;text-transform:uppercase;color:var(--accent); } /* header — white bar on the cream page (Headspace/Bird pattern): visibly a website header, without the heavy dark-band look Lee rejected */ header.site{border-bottom:1px solid var(--line);background:var(--card);box-shadow:0 1px 4px rgba(34,29,22,.05);position:sticky;top:0;z-index:50} header.site .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:64px;max-width:var(--maxw);padding:0 22px} .brand{justify-self:start;display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink)} .brand img{width:30px;height:30px;border-radius:8px} nav.main{display:flex;gap:26px;align-items:center;justify-self:center} nav.main a{color:var(--ink-2);font-weight:600;font-size:14.5px} nav.main a:hover{color:var(--ink);text-decoration:none} /* sections */ section{padding:46px 0} .hero{text-align:center;padding:56px 0 36px} .hero .kicker{display:block;margin-bottom:14px} .hero h1{max-width:15em;margin:0 auto 18px;text-wrap:balance} .hero .sub{margin:0 auto;text-wrap:balance} /* app cards (the fork) */ .apps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px} .app-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column;color:var(--ink); } .app-card:hover{text-decoration:none;border-color:var(--ac)} .app-card .tile{ background:var(--ac);padding:26px 26px 0;display:flex;justify-content:center; } .app-card .tile img{width:78%;border-radius:14px 14px 0 0} .app-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .app-card .kicker{color:var(--ac)} .app-card h3{display:flex;align-items:center;gap:10px} .app-card h3 img{width:26px;height:26px;border-radius:7px} .app-card p{color:var(--ink-2);font-size:15px;flex:1} .app-card .go{font-weight:700;color:var(--ac);font-size:15px} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .step .n{ font:600 13px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--accent);margin-bottom:10px;display:block; } .step p{color:var(--ink-2);font-size:15px} /* feature split (screenshot + copy) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .split .shot{background:var(--cream);border-radius:var(--radius);padding:30px 30px 0;display:flex;justify-content:center} .split .shot img{width:72%;border-radius:14px 14px 0 0} .split .kicker{display:block;margin-bottom:12px} .split h2{margin-bottom:12px} .split p{color:var(--ink-body);margin-bottom:10px} .split ul{list-style:none;margin-top:6px} .split li{padding-left:22px;position:relative;color:var(--ink-body);font-size:16px;margin-bottom:8px} .split li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--accent)} /* founder */ .founder{background:var(--cream);border-radius:var(--radius);padding:34px;max-width:760px;margin:0 auto} .founder .kicker{display:block;margin-bottom:14px} .founder p{font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--ink);max-width:36em;margin-bottom:14px} .founder h2{font-size:26px;letter-spacing:-.01em;margin-bottom:14px} .founder .sig{color:var(--ink-2);font-size:15px} /* store buttons */ .stores{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .store-btn{ display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff; border-radius:10px;padding:10px 16px;font-weight:700;font-size:14px;line-height:1.15; } .store-btn:hover{text-decoration:none;background:#000} .store-btn small{display:block;font-weight:500;font-size:10.5px;opacity:.75;letter-spacing:.02em} .store-btn svg{width:20px;height:20px;flex:none} .store-btn.soon{background:var(--card);color:var(--ink-2);border:1px solid var(--line);pointer-events:none} /* faq */ .faq{max-width:760px;margin:0 auto} .faq h2{margin-bottom:18px} .faq details{border-bottom:1px solid var(--line);padding:14px 0} .faq summary{font-weight:700;cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq details p{color:var(--ink-body);padding-top:8px;max-width:60em} /* footer */ footer.site{border-top:1px solid var(--line);padding:36px 0 48px;margin-top:30px} footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;color:var(--ink-2);font-size:14px} footer.site a{color:var(--ink-2)} footer.site .made{margin-left:auto} /* helpers */ .center{text-align:center} .mt{margin-top:26px} .section-head{margin-bottom:22px} .section-head .kicker{display:block;margin-bottom:10px} @media(max-width:840px){ .apps,.steps{grid-template-columns:1fr} .split{grid-template-columns:1fr;gap:26px} .hero{padding:34px 0 30px} .hero .sub{font-size:16.5px;line-height:1.55} section{padding:44px 0} .founder{padding:28px} /* phone banner: ONE slim row — logo left, Get the app right. Nav lives in the page (fork cards, cross-links) + footer; YouTube lives in the footer. */ header.site .wrap{display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 16px;gap:10px} nav.main{display:none} .yt-btn{display:none} .brand{font-size:17px} .brand img{width:30px;height:30px;border-radius:8px} .hdr-cta{padding:8px 15px;font-size:13.5px} .stores .badge img{height:46px} .split .shot,.lander .shot{padding:22px 22px 0} .split .shot img,.lander .shot img{width:82%} .app-card .tile{padding:20px 20px 0} footer.site .wrap{flex-direction:column;align-items:flex-start;gap:10px} footer.site .made{margin-left:0} } @media(max-width:400px){ h1{font-size:31px} .stores{gap:8px} .stores .badge img{height:42px} } /* video facade — YouTube loads only on click */ .video{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#111;aspect-ratio:16/9;max-width:760px;margin:0 auto} .video>img{width:100%;height:100%;object-fit:cover;opacity:.92} .video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .video .play span{width:70px;height:50px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center} .video .play svg{width:22px;height:22px;fill:#fff;margin-left:3px} .video:hover .play span{transform:scale(1.06)} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* screenshots always keep their intrinsic ratio */ .split .shot img,.lander .shot img,.app-card .tile img{height:auto} /* official store badges */ .stores .badge{display:inline-block} .stores .badge img{height:52px;width:auto;display:block} .stores .badge:hover{opacity:.85;text-decoration:none} /* illustration cards — the warm human moments */ .art{border-radius:var(--radius);overflow:hidden;max-width:760px;margin:0 auto} .art img{width:100%;height:auto} .hero-art{max-width:760px;margin:30px auto 0} .founder-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center} .founder-grid .art{margin:0} @media(max-width:840px){.founder-grid{grid-template-columns:1fr;gap:18px}.hero-art{margin-top:30px}} /* YouTube button in the header (desktop only; the footer carries it on phones). NOTE: this base rule sits AFTER the phone block above, so the hide must also live below it — same-specificity cascade order bit us once already. */ .yt-btn{display:inline-flex;align-items:center;padding:4px;border-radius:8px;line-height:0} .yt-btn:hover{opacity:.8;text-decoration:none} .yt-btn svg{width:34px;height:24px;flex:none} @media(max-width:840px){ .yt-btn{display:none} } /* recognition strip — the "that's literally me" cards */ .moments{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;margin:0 auto} .moment{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;color:var(--ink-body);font-size:16px;line-height:1.5} .moment strong{color:var(--ink);display:block;margin-bottom:4px;font-size:16px} /* scenario chips — real product names as proof */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13.5px;color:var(--ink-2);white-space:nowrap} .chip.more{color:var(--ink);font-weight:700} /* interviewer persona cards */ .personas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:920px;margin:0 auto} .persona{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 12px;text-align:center} .persona .r{display:block;font:600 11.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .persona strong{display:block;font-size:14.5px;margin:8px 0 2px} .persona span:not(.r){font-size:12.5px;color:var(--ink-2)} /* mobile sticky install bar (ad landers only) */ .install-bar{display:none} @media(max-width:840px){ .moments{grid-template-columns:1fr} .personas{grid-template-columns:repeat(2,1fr)} .persona:last-child{grid-column:1 / -1} .install-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--ink);color:#fff;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))} .install-bar span{font-weight:700;font-size:14px} .install-bar a{background:#fff;color:var(--ink);font-weight:800;border-radius:999px;padding:9px 18px;font-size:14px;flex:none} body:has(.install-bar){padding-bottom:64px} } /* hero CTA */ .hero-cta{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px} .cta{display:inline-block;background:var(--ink);color:#fff;font-weight:800;border-radius:999px;padding:14px 30px;font-size:16px} .cta:hover{background:#000;text-decoration:none} .hero-note{color:var(--ink-2);font-size:14px} /* lander hero illustrations are desktop garnish, not mobile scroll tax */ @media(max-width:840px){.art-desktop{display:none}} /* app-card actions: lander link + install link */ .card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px} .card-actions .go{font-weight:700;color:var(--ac);font-size:14.5px;white-space:nowrap} .card-actions .get{font-weight:700;color:var(--ink);font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap} .card-actions .get:hover{border-color:var(--ink);text-decoration:none} .app-card{color:var(--ink)} a.tile{display:flex} .note-sm{color:var(--ink-2);font-size:12.5px;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em} /* free vs pro — pre-sell the subscription */ .plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:0 auto} .plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .plan.pro{border-color:var(--accent);border-width:2px} .plan .tier{font:700 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .plan .price{font-family:"Archivo",sans-serif;font-weight:800;font-size:26px;margin:8px 0 2px} .plan .per{color:var(--ink-2);font-size:13.5px;margin-bottom:12px} .plan ul{list-style:none} .plan li{padding-left:24px;position:relative;color:var(--ink-2);font-size:14.5px;margin-bottom:8px} .plan li::before{content:"\2713";position:absolute;left:2px;color:var(--accent);font-weight:800} .plans-line{text-align:center;color:var(--ink-2);font-size:15px;margin-top:16px} @media(max-width:840px){.plans{grid-template-columns:1fr}} /* header actions: Get the app (accent) + YouTube */ .hdr-actions{justify-self:end;display:flex;gap:10px;align-items:center} .hdr-cta{background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:13.5px;line-height:1;white-space:nowrap} .hdr-cta:hover{text-decoration:none;background:#000} @media(max-width:840px){ } /* two-up moments that stack correctly on mobile (inline styles can't) */ .moments-2{max-width:760px;grid-template-columns:1fr 1fr} /* alternating splits on desktop */ .split.rev .shot{order:2} /* Pro plan: tinted field, not just a border */ .plan.pro{background:color-mix(in srgb, var(--accent) 6%, var(--card))} /* closing CTA band = the page's one landmark */ section.band{background:var(--cream)} @media(max-width:840px){ .moments-2{grid-template-columns:1fr} .split.rev .shot{order:0} /* landers: reclaim the paid first viewport */ body:has(.install-bar) nav.main{display:none} .lander .stores{display:none} /* social hero illustration stays but smaller */ .hero .hero-art{max-width:520px} }