/* prestoscribe.com/15 — The 15-Second Consultation-Letter Challenge.
   Tokens, typefaces and keyframes come from the site's own ../styles.css; this file
   holds only the page's layout. Palette, radii and shadows match the landing page. */
.ch-page{min-height:100vh;background:radial-gradient(1200px 700px at 20% -10%,#14324A,#08131E 62%);font-family:'IBM Plex Sans',system-ui,sans-serif;color:#E9EFF1;display:flex;flex-direction:column;}
.ch-wrap{max-width:1344px;width:100%;box-sizing:border-box;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);}

/* nav: the mark home, and a quiet trial pill */
.ch-nav{position:fixed;top:0;left:0;right:0;z-index:20;border-bottom:1px solid transparent;transition:background .35s,border-color .35s;}
.ch-nav.on{background:rgba(8,19,30,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#24415B;}
.ch-nav .in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(20px,4vw,48px);max-width:1344px;box-sizing:border-box;margin:0 auto;}
.ch-brand{display:flex;align-items:center;gap:11px;color:#E9EFF1;}
.ch-brand img{width:30px;height:30px;display:block;border-radius:8px;}
.ch-brand span{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:500;letter-spacing:.01em;}
.ch-pill{border:1px solid #C6A15B;color:#D8B863;font-weight:600;padding:9px 18px;border-radius:999px;font-size:14px;white-space:nowrap;transition:background .4s,color .4s;}
.ch-pill.fill{background:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%);color:#0E1C28;}

/* hero band */
.ch-hero{padding-top:calc(66px + min(7vh,64px));padding-bottom:52px;}
.ch-hero .lede{max-width:820px;}
.ch-eyebrow{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#C6A15B;margin:0 0 20px;}
.ch-h1{font-family:'Source Serif 4',Georgia,serif;font-optical-sizing:auto;font-weight:400;font-size:clamp(40px,4.8vw,66px);line-height:1.04;letter-spacing:-.02em;margin:0 0 24px;text-wrap:pretty;}
.ch-h1 span{display:block;}
.ch-h1 .gold{color:#D8B863;}
.ch-sub{font-size:18px;line-height:1.55;color:#C9D4D9;margin:0;max-width:58ch;text-wrap:pretty;}

/* the six cards */
.ch-cases{padding-top:8px;padding-bottom:72px;}
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0;}
.ch-grid li{display:flex;}
.ch-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;padding:24px 24px 22px;border:1px solid #24415B;border-radius:10px;background:rgba(14,28,40,.6);cursor:pointer;transition:transform .18s ease-out,border-color .18s,box-shadow .18s,background .18s;}
.ch-card:hover{transform:translateY(-2px);border-color:#3A5A7A;box-shadow:0 12px 32px rgba(0,0,0,.35);}
.ch-card:focus-visible{outline:2px solid rgba(198,161,91,.7);outline-offset:3px;}
.ch-card[aria-pressed="true"]{border-color:#C6A15B;background:#0f2230;box-shadow:0 0 0 1px rgba(198,161,91,.25),0 12px 32px rgba(0,0,0,.35);}
.ch-card .t{font-family:'Source Serif 4',Georgia,serif;font-weight:400;font-size:22px;line-height:1.25;color:#E9EFF1;text-wrap:pretty;}
.ch-card .d{font-size:14.5px;line-height:1.55;color:#B7C3C9;text-wrap:pretty;flex:1;}
.ch-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ch-num{font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:12px;color:#7F909A;margin-right:2px;}
.ch-tag{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid #24415B;color:#8DA0A9;border-radius:999px;padding:3px 9px;}
.ch-plan{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 10px;}
.ch-plan.essential{background:#69CDA9;color:#08131E;}
.ch-plan.academic{background:#F0D07E;color:#08131E;}
.ch-cases .key{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:#7F909A;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;}

/* the stage */
.ch-stage{padding-bottom:96px;scroll-margin-top:96px;}
.ch-stage[hidden]{display:none;}
.ch-stage-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start;}
.ch-lab{margin:0 0 12px;font-size:11px;line-height:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7F909A;}
.ch-sh{margin:0 0 0 8px;display:block;border-left:1px solid #C6A15B;padding:4px 0 4px 18px;font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:14.5px;line-height:1.65;color:#D8B863;min-height:48px;text-wrap:pretty;}
.ch-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 0 8px;}
.ch-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:28px 0 0;border:0;cursor:pointer;overflow:hidden;height:54px;padding:0 28px;border-radius:10px;background:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%);color:#0E1C28;font:600 17px/1 'IBM Plex Sans',system-ui,sans-serif;box-shadow:0 12px 32px rgba(198,161,91,.18);transition:height .4s cubic-bezier(.2,.8,.2,1),border-radius .4s,box-shadow .4s,background-color .4s,filter .2s;}
.ch-btn:hover{filter:brightness(1.06);}
.ch-btn:focus-visible{outline:2px solid rgba(198,161,91,.7);outline-offset:4px;}
.ch-btn:disabled{opacity:.45;cursor:default;filter:none;}
.ch-btn[hidden]{display:none;}
.ch-btn span{transition:opacity .2s;}
.ch-btn i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#C6A15B;transform-origin:left;transform:scaleX(0);opacity:0;}
.ch-btn.writing,.ch-btn.done{height:2px;border-radius:1px;box-shadow:none;background:#24415B;cursor:default;pointer-events:none;}
.ch-btn.writing span,.ch-btn.done span{opacity:0;}
.ch-btn.writing i,.ch-btn.done i{opacity:1;}
/* one header row for every column: label at the left edge of its box, a small readout at the right;
   a fixed 18px line so boxes in neighbouring columns start on the same line */
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px;min-height:18px;}
.ch-head>*{margin:0;line-height:18px;}
.ch-head .ch-num{color:#B7C3C9;}   /* the character count reads like the clock opposite it */
.ch-counter{margin:0;display:flex;align-items:baseline;gap:12px;font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:12px;color:#B7C3C9;}
.ch-presto{font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:13px;color:#D8B863;opacity:0;transition:opacity .8s;}
.ch-paper{position:relative;border-radius:6px;background:#FCFBF8;border:1px solid #ECE6DA;box-sizing:border-box;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(198,161,91,.12),inset 0 1px 0 #FFFFFF;min-height:380px;}
.ch-letter{box-sizing:border-box;padding:40px 44px 34px;color:#1B2B36;font-family:'Source Serif 4',Georgia,serif;font-size:14.5px;line-height:1.55;}
.ch-letter p{margin:0 0 6px;}
.ch-letter p.gap{margin-top:12px;}
.ch-letter p.li{padding-left:22px;text-indent:-22px;}
.ch-letter p.sub{padding-left:34px;}
.ch-letter p.hd{font-weight:600;}
.ch-letter strong{font-weight:600;}
.ch-letter .br{background:#F5EFE1;color:#6E5828;border-radius:3px;padding:0 4px;white-space:nowrap;}
.ch-letter .wait{display:inline-block;width:7px;height:16px;background:#C6A15B;vertical-align:-3px;animation:caret 1s steps(1) infinite;}
.ch-letter [hidden],.ch-sig[hidden],.ch-name[hidden]{display:none!important;}
.ch-letter .hint{color:#8A9096;font-style:italic;}
.ch-sig{position:relative;height:56px;margin-top:2px;}
.ch-sig svg{position:absolute;left:-6px;top:0;overflow:visible;}
.ch-sig path.fl{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);}
.ch-sig path.sp{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease-out 1.4s,transform .6s cubic-bezier(.2,.8,.2,1) 1.4s;}
.ch-sig.on path.fl{stroke-dashoffset:0;}
.ch-sig.on path.sp{opacity:1;transform:scale(1);}
.ch-name{display:flex;flex-direction:column;gap:3px;margin-top:4px;opacity:0;transition:opacity .9s ease-out 2s;}
.ch-name.on{opacity:1;}
.ch-name p{margin:0;}
.ch-name .n{font-size:13.5px;font-weight:600;color:#1B2B36;}
.ch-name .r{font-size:12px;color:#6E7E86;}
.ch-note{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:#7F909A;min-height:20px;}
.ch-after{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;}
.ch-after button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#B7C3C9;padding:6px 0;}
.ch-after button:hover{color:#D8B863;}
.ch-after button:focus-visible{outline:2px solid rgba(198,161,91,.7);outline-offset:3px;border-radius:3px;}
.ch-after[hidden]{display:none;}

/* the close */
.ch-close{background:#08131E;}
.ch-close .in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;padding-top:clamp(88px,9vw,140px);padding-bottom:clamp(88px,9vw,140px);}
.ch-close .line{margin:0;font-family:'Source Serif 4',Georgia,serif;font-weight:400;font-size:clamp(28px,3vw,34px);line-height:1.15;letter-spacing:-.015em;max-width:800px;text-wrap:pretty;}
.ch-close .cta{display:inline-block;background:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%);color:#0E1C28;font-weight:600;padding:16px 28px;border-radius:10px;font-size:17px;box-shadow:0 12px 32px rgba(198,161,91,.18);}
.ch-close .cta:hover{filter:brightness(1.06);}
.ch-close .fine{margin:0;font-size:12px;line-height:1.7;color:#7F909A;max-width:640px;text-wrap:pretty;}
.ch-close svg path.fl{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);}
.ch-close svg path.sp{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease-out 1.1s,transform .5s cubic-bezier(.2,.8,.2,1) 1.1s;}
.ch-close svg.on path.fl{stroke-dashoffset:0;}
.ch-close svg.on path.sp{opacity:1;transform:scale(1);}

/* footer, as on the home page */
.ch-foot{background:#050C14;color:#7F909A;}
.ch-foot p{margin:0 auto;max-width:1344px;box-sizing:border-box;padding:24px clamp(20px,4vw,48px) 28px;font-size:12px;line-height:1.6;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;}
.ch-foot a{color:#7F909A;}
.ch-foot a:hover{color:#E9EFF1;}
.ch-foot a.home{color:#E9EFF1;}

@media (max-width:1100px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:960px){.ch-stage-grid{grid-template-columns:minmax(0,1fr);gap:28px;}}
@media (max-width:720px){
  .ch-grid{grid-template-columns:minmax(0,1fr);}
  .ch-hero{padding-top:calc(66px + 20px);padding-bottom:36px;}
  .ch-letter{padding:24px 20px;}
  .ch-paper{min-height:240px;}
  .ch-card{padding:20px 20px 18px;}
  .ch-pill{padding:8px 14px;font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .ch-card,.ch-btn,.ch-nav,.ch-presto,.ch-name,.ch-sig path,.ch-close svg path{transition:none!important;}
  .ch-letter .wait{animation:none;}
}

/* try your own */
.ch-try{padding-bottom:96px;scroll-margin-top:96px;}
.ch-try-head{max-width:820px;margin:0 0 32px;}
.ch-h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0 0 16px;text-wrap:pretty;}
/* the shorthand box: one even border, flush with its label and the button, the same top line as the paper;
   focus is a gold edge and a soft glow (no outline that creeps into the label above) */
.ch-box{display:block;width:100%;box-sizing:border-box;margin:0;background:#0B1E2D;border:1px solid #2A4A66;border-radius:10px;color:#D8B863;font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:14.5px;line-height:1.65;padding:14px 16px;resize:vertical;min-height:120px;transition:border-color .2s,box-shadow .2s;}
.ch-box::placeholder{color:#7F909A;}
.ch-box:hover:not(:focus){border-color:#35597A;}
.ch-box:focus{outline:none;border-color:#C6A15B;box-shadow:0 0 0 3px rgba(198,161,91,.16);}
.ch-msg{color:#E9C583;min-height:20px;}
.ch-wmclip{position:absolute;inset:0;overflow:hidden;border-radius:6px;pointer-events:none;} /* clips the tilted watermark; the paper itself stays unclipped so the app's guide tag and chips can sit on its margins */
.ch-wm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;align-items:center;pointer-events:none;transform:rotate(-22deg) scale(1.15);}
.ch-wm span{font:600 clamp(18px,3vw,30px)/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(154,123,63,.13);white-space:nowrap;}
.ch-demo-tag{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(216,184,99,.5);color:#D8B863;border-radius:999px;padding:2px 8px;vertical-align:middle;}
.ch-letter .sigline{color:#6E7E86;font-style:italic;font-size:13px;}
/* quick details before it writes — a card with the same even edge as the box above it */
.ch-quiz{margin:18px 0 0;padding:16px 18px 14px;border:1px solid #2A4A66;border-radius:10px;background:rgba(14,28,40,.6);}
.ch-quiz[hidden]{display:none;}
.ch-quiz-sub{margin:0 0 12px;font-size:12.5px;color:#8DA0A9;}
.ch-qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:8px 0;border-top:1px solid rgba(36,65,91,.6);}
.ch-qrow:first-of-type{border-top:0;}
.ch-qrow .q{font-size:14px;color:#E9EFF1;}
.ch-qrow .opts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.ch-qrow .pill{all:unset;cursor:pointer;font-size:12.5px;font-weight:500;line-height:1;padding:7px 12px;border-radius:999px;border:1px solid #24415B;background:transparent;color:#B7C3C9;transition:background .2s,color .2s,border-color .2s;}
.ch-qrow .pill:hover{border-color:#C6A15B;}
.ch-qrow .pill.on{background:#F5EFE1;color:#6E5828;border-color:#F5EFE1;}
.ch-qrow .pill:focus-visible{outline:2px solid rgba(198,161,91,.7);outline-offset:2px;}
.ch-qrow .qin{grid-column:1 / -1;box-sizing:border-box;width:100%;background:#0B1E2D;border:1px solid #24415B;border-radius:8px;color:#D8B863;font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:13.5px;padding:9px 12px;}
.ch-qrow .qin::placeholder{color:#7F909A;}
.ch-qrow .qin:focus{outline:none;border-color:#C6A15B;box-shadow:0 0 0 3px rgba(198,161,91,.16);}
.ch-qrow .qin[hidden]{display:none;}
.ch-quiz-actions{display:flex;align-items:center;gap:16px;margin:14px 0 0;}
.ch-btn2{border:0;cursor:pointer;background:linear-gradient(155deg,#F0D07E 0%,#D0A95E 46%,#9A7B3F 100%);color:#0E1C28;font:600 14.5px/1 'IBM Plex Sans',system-ui,sans-serif;padding:12px 20px;border-radius:9px;box-shadow:0 10px 24px rgba(198,161,91,.16);}
.ch-btn2:hover{filter:brightness(1.06);}
.ch-btn2:focus-visible{outline:2px solid rgba(198,161,91,.7);outline-offset:3px;}
.ch-link{all:unset;cursor:pointer;font-size:12.5px;color:#B7C3C9;padding:4px 0;}
.ch-link:hover{color:#D8B863;}
@media (max-width:720px){.ch-qrow{grid-template-columns:minmax(0,1fr);}.ch-qrow .opts{justify-content:flex-start;}}

/* after the letter: the app's own bracket filling (styles in brackets/inline-brackets.css — the app's file).
   Only the placement on this page is decided here. */
.ch-lettercard{position:relative;}
#letterCard .ch-head{justify-content:flex-start;} /* label · "N to fill" pill · clock (the clock keeps the right edge) */
.ch-head .ch-counter{order:1;margin-left:auto;}
.ch-head .brpill{margin-left:0;}
#tryPaper .brclear{margin:-16px 0 20px 44px;}     /* the quiet link sits under the letter, inside the paper */
#out .ph{text-indent:0;}                          /* the paper's hanging-indent list items must not indent the field's own text */
.ch-fillhint{margin-top:6px;}
.ch-fillhint[hidden]{display:none;}
.ch-fillhint kbd{font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;font-size:11px;border:1px solid #24415B;border-radius:4px;padding:0 5px;color:#B7C3C9;}
@media (min-width:1181px){#tryown .ch-stage-grid{column-gap:130px;}} /* room on the paper's left margin for the gliding "Fill this one →" tag */
@media (max-width:1180px){#letterCard .brguide{left:auto;right:9px;top:auto!important;bottom:calc(100% + 4px);}#letterCard .brguide::after{display:none;}} /* narrower: the tag sits above the paper's corner, as in the app's narrow layout */
@media (max-width:720px){
  #tryPaper .brclear{margin-left:20px;}
  #letterCard .ch-head{flex-wrap:wrap;row-gap:6px;}          /* phone: label · pill, then the clock on its own line */
  #letterCard .ch-head .ch-lab,#letterCard .ch-head .ch-counter{white-space:nowrap;}
}

/* after the third "try your own": the limit line and the trial button (Conversion Overhaul Part 3.7) */
.ch-limit{margin:18px 0 0;padding:18px 0 0;border-top:1px solid #24415B;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.ch-limit[hidden]{display:none;}
.ch-limit-line{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.45;color:#E9EFF1;text-wrap:pretty;}
.ch-limit .ch-btn2{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:0 20px;}