/* The landing, on top of result.css (fonts, buttons, the contradiction card), in the format of Slite's
   Company Brain ebook page (slite/apps/website/pages/ebooks/company-brain): the copy and the form on plain
   cream at the left, an orange grain panel flush to the right edge, the one object straddling the split.
   Tokens from that page and packages/style/src/variables.css. */
:root{
 --moon:#fdf9f4;            /* --moon-dust-lighter, the page */
 --o300:#ff824d;            /* --slite-orange-300, the panel */
 --o400:#ed6531;            /* --slite-orange-400, kicker and checks */
 --s00:#2d2f34; --s05:#3f434a; --s10:#5e646e; --s20:#6a707c; --s30:#9ba2ae; --s40:#d8dadf; --s100:#fdfdfd;
 --err:#b8461b;
 --field-h:42px;
}
/* Comico (Indian Type Foundry, fontshare.com terms), cut to the glyphs of the one note it writes */
@font-face{font-family:Comico;font-weight:400;font-style:normal;font-display:swap;src:url(brand/Comico-Regular.woff2) format('woff2')}

body.landing{background:var(--moon);color:var(--s05)}

/* the split: the panel is the right part of the screen, from the top to the bottom */
.split{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden}
.panel{position:absolute;top:0;right:0;bottom:0;width:calc(50vw - 584px + 278px);background-color:var(--o300);background-image:url(brand/grain-specks.svg);background-size:100px 100px;background-blend-mode:screen}
main.split>.grid{padding-bottom:0}
.grid{position:relative;max-width:1216px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 40px}
.left{grid-column:1 / span 6;grid-row:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* the brand bar: wordmark | name, as the ebook's */
.brand{flex:none;display:flex;align-items:center;gap:16px;height:var(--bar,64px);color:var(--s05)}
.brand a{display:flex;color:inherit}
.brand .wordmark{height:24px;padding-top:4px;color:var(--s05)}
.brand .name{font-size:14px;font-weight:600;line-height:21px;padding-left:16px;border-left:1px solid rgba(38,38,43,.2)}

.copy{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:var(--gap,24px);padding:var(--pad,40px) 0}
.kicker{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.2;color:var(--o400)}
/* two lines, always: each half is a line of its own, sized so the longer one fits the column */
.copy h1{font-size:clamp(30px,2.9vw,40px);line-height:1.16;color:var(--s00);padding-bottom:var(--h1-pad,8px);letter-spacing:0}
.copy h1 span{display:block;white-space:nowrap}
.intro{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.4;color:var(--s20)}
.intro strong{font-weight:700;color:var(--s05)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--list-gap,6px)}
.checks li{display:flex;align-items:flex-start;gap:12px;font-size:16px;font-weight:500;line-height:24px;color:var(--s05)}
.checks svg{flex:none;width:22px;height:22px;margin-top:1px}
.formbox{margin-top:4px}

/* the form: the ebook's fields (label 13.6px semibold, 42px light inputs, 8px radius), two by two */
.ask .fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 12px}
.ask .fields.one,.ask .fields.keyed{grid-template-columns:minmax(0,1fr)}
.fld{display:grid;grid-template-rows:auto var(--field-h) auto;gap:8px;min-width:0}
.fld label{font-size:13.6px;font-weight:600;line-height:20px;color:var(--s05)}
.ask input,.ask select{display:block;width:100%;min-width:0;height:var(--field-h);margin:0;padding:0 12px;font:inherit;font-size:14px;line-height:1;color:var(--s00);background:var(--s100);border:1px solid var(--s40);border-radius:8px;outline:0;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.ask input::placeholder{color:var(--s20);opacity:1}
.ask input:hover,.ask select:hover{border-color:var(--s30)}
.ask input:focus,.ask select:focus{border-color:var(--o400);box-shadow:0 0 0 3px var(--orange-100)}
.ask [aria-invalid="true"]{border-color:var(--err)}
.pick{position:relative;display:block;height:var(--field-h)}
.pick select{padding-right:36px;cursor:pointer}
.pick select:invalid{color:var(--s20)}
.pick::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid var(--s10);border-bottom:1.5px solid var(--s10);transform:rotate(45deg);pointer-events:none}
.err{font-size:13.6px;font-weight:500;line-height:18px;color:var(--err)}
.err:empty{display:none}
.ask .go{display:flex;width:100%;height:54px;min-height:54px;margin-top:var(--go-top,28px);padding:0 24px;border:0;border-radius:999px;background:var(--s00);color:var(--s100);font-size:17px;font-weight:600}
.ask .go:hover{background:#000}
.ask .go:focus-visible{outline:2px solid var(--o400);outline-offset:3px}
.ask .go[disabled]{opacity:.6}
.ask .fine{margin-top:12px;font-size:13.6px;line-height:20px;color:var(--s10)}
.ask .fields.keyed .fld.lead,.ask .fields.keyed~.fine,.ask .fields.keyed~.consent{display:none}
/* the ebook's two boxes: 16px, 1.5px shade-30 edge, 4px radius, Slite blue once ticked */
.consent{display:flex;flex-direction:column;gap:var(--box-gap,12px);margin-top:var(--box-top,24px)}
.box{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:13.6px;line-height:20px;color:var(--s10)}
.ask .box input{flex:none;width:16px;min-width:16px;height:16px;margin:2px 0 0;padding:0;box-shadow:none;border:1.5px solid var(--s30);border-radius:4px;background:#fff center/10px 8px no-repeat;appearance:none;-webkit-appearance:none;cursor:pointer;transition:background-color .12s,border-color .12s}
.ask .box:hover input{border-color:var(--s10)}
.ask .box input:checked{background-color:#2f7ae5;border-color:#2f7ae5;background-image:url(brand/checkbox-tick.svg)}
.ask .box input:focus,.ask .box input:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #5b95ea}
.ask .box input[aria-invalid="true"]{border-color:var(--err)}
.box a{color:var(--s10);text-decoration:underline;text-underline-offset:2px}
.box a:hover{color:var(--s00)}
.consent .err{margin:-6px 0 0 24px}
.ask.code .sent{font-size:16px;line-height:1.4;color:var(--s05);margin-bottom:16px}
.ask.code input{font-size:18px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.ask.code .acts{margin-top:14px;align-items:center;gap:12px 18px}
.ask .plain{font:inherit;font-size:14px;font-weight:600;color:var(--s10);text-decoration:underline;text-underline-offset:3px;min-height:32px}
.ask .plain:hover{color:var(--s00)}
.formbox .msg{font-size:14px;line-height:1.4;color:var(--s10)}
.formbox .msg:not(:empty){margin-top:12px}

/* the proof: the example card straddles the split, centred on the visible height, the ebook's shadow */
.proof{grid-column:8 / span 5;grid-row:1;margin:0;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.example{position:relative;isolation:isolate;width:min(100%,480px)}
.example .card{position:relative;border:0;border-radius:10px;padding:26px;box-shadow:0 24px 48px rgba(38,38,43,.24)}
.example::before,.example::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:10px;box-shadow:0 10px 30px rgba(38,38,43,.16)}
.example::before{background:var(--dust-200);transform:translate(10px,12px) rotate(2.2deg)}
.example::after{background:var(--dust-300);transform:translate(-8px,22px) rotate(-1.8deg);z-index:-2}
.example .title{margin-top:12px;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.3;color:var(--s00);text-wrap:balance}
.example .kind{color:#a63f18}
.example .sides{margin-top:20px}
.example .excerpt{font-size:14.5px}
.example .foot{display:none}
.sticker{position:absolute;z-index:1;right:-24px;top:-46px;width:104px;height:auto;transform:rotate(8deg)}
.hand{position:relative;align-self:flex-end;width:min(100%,300px);margin:34px -6px 0 0;padding-left:60px;min-height:44px;display:flex;align-items:flex-end}
.hand span{font-family:Comico,var(--sans);font-size:18px;line-height:1.25;color:#2a1a10;transform:rotate(-2deg);transform-origin:0 100%;text-wrap:balance}
.hand .arrow{position:absolute;left:8px;bottom:6px;width:44px;height:auto;transform:scaleY(-1) rotate(-14deg)}

/* one line below the fold: who makes this, and the two ways to Slite */
footer.foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;padding:12px 0 14px;border-top:1px solid rgba(38,38,43,.1);font-size:13px;line-height:18px;color:var(--s20)}
footer.foot p{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
footer.foot .wordmark{height:15px;color:var(--s10)}
footer.foot .links{gap:8px 20px}
footer.foot .learn{font-weight:600;color:var(--s05);text-decoration:underline;text-decoration-color:var(--s40);text-underline-offset:3px}
footer.foot .learn:hover{text-decoration-color:currentColor}
.plainnote{padding:24px;color:var(--s10)}

/* the one entrance: the example settles in; nothing moves for those who asked for less */
@media (prefers-reduced-motion:no-preference){
 .example{transition:transform .9s cubic-bezier(.16,1,.3,1)}
 .sticker{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
 @starting-style{
  .example{transform:translateY(18px) rotate(-1.2deg)}
  .sticker{transform:rotate(-6deg) scale(.86)}
 }
}
@media (prefers-reduced-motion:reduce){
 .ask input,.ask select{transition:none}
}

/* desktop: the page is one screen, footer included; the rhythm tightens with the height */
@media (min-width:1101px) and (max-height:960px){
 .grid{--pad:20px;--gap:18px}
}
@media (min-width:1101px) and (max-height:880px){
 .grid{--bar:52px;--pad:10px;--gap:14px;--h1-pad:0px;--go-top:18px;--box-top:16px;--box-gap:8px}
 .copy h1{font-size:clamp(30px,2.6vw,38px)}
 .ask .fields{row-gap:12px}
 .fld{gap:6px}
}
@media (min-width:1101px) and (max-height:800px){
 .grid{--gap:12px;--list-gap:2px}
 .intro p+p{display:none}
}
/* stacked: the copy and the form first, then the proof on its orange band */
@media (max-width:1100px){
 .panel{display:none}
 .grid{display:flex;flex-direction:column;max-width:688px}
 .left{display:contents}
 .brand{order:0}
 .copy{order:1;padding:28px 0 48px}
 .proof{order:2}
 footer.foot{order:3;padding:18px 0 22px;border-top:0}
 .copy h1 span{display:inline;white-space:normal}
 .hand{align-self:center;width:min(100%,480px);margin-right:0}
 .proof{position:static;height:auto;margin:0 -24px;padding:64px 24px 40px;background-color:var(--o300);background-image:url(brand/grain-specks.svg);background-size:100px 100px;background-blend-mode:screen}
}
@media (max-width:640px){
 .grid{padding:0 16px}
 .copy h1{font-size:32px}
 .ask .fields{grid-template-columns:minmax(0,1fr)}
 .proof{margin:0 -16px;padding:56px 16px 32px}
 .sticker{width:78px;right:-6px;top:-38px}
 .example .card{padding:18px 16px}
 .example .title{font-size:18px}
 .hand{padding-left:52px}
 .hand span{font-size:16px}
}