/* Top of the page: three options (thread 19, Oct 16, 2026). Same headline block; only the piece under it changes.
   Everything is drawn in HTML from the app's own parts, on invented sample data, so it stays sharp at any size and costs nothing to run. */
.hero{padding-top:44px}
@media (min-width:601px){.hero .t-display{font-size:clamp(52px,4.45vw,64px);line-height:1.0625}}
.hx-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.hx-head h1{grid-column:1/9}
.hx-side{grid-column:9/13;grid-row:1;padding-bottom:6px}
.hx-side .t-body{margin:0;font-size:17px;line-height:26px}
/* the hero's actions sit under the headline: Create account first, as in the header (Ryan, 21 Oct 2026) */
.hx-acts{grid-column:1/9;grid-row:2;display:flex;flex-wrap:wrap;gap:12px}
.hx-stage{margin-top:36px}
.hx-stage[hidden]{display:none}
.hx-stage .panel{position:relative}
.sample{position:absolute;right:16px;top:14px;z-index:4;font-size:11.5px;line-height:16px;color:var(--ink-2);background:rgb(251 253 254 / .92);padding:3px 8px;border-radius:4px;border:1px solid var(--rule)}
.ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* small app parts used by all three */
.lk{position:relative;display:inline-flex}
.lk::before,.lk::after{content:'';position:absolute;top:-5px;bottom:-5px;width:7px;border:1.75px solid var(--amber);opacity:0;transform:scale(1.35);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.lk::before{left:-7px;border-right:0}.lk::after{right:-7px;border-left:0}
.lk.on::before,.lk.on::after{opacity:1;transform:none}

/* ---------- option 1: try a search ---------- */
.s1-panel{padding:40px 40px 0}
.s1-try{display:flex;align-items:center;gap:10px;height:76px;flex-wrap:wrap}
.s1-try .t-label{margin-right:6px}
.trychip{height:32px;padding:0 12px;border:1px solid var(--edge);border-radius:4px;background:var(--page);font:500 13.5px/1 var(--sans);color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.trychip:hover{border-color:var(--ink)}
.trychip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.s1-try .hint{font-size:13px;color:var(--ink-2)}
.s1 .sample{position:static;margin-left:auto}
.appwin{height:440px;display:flex;flex-direction:column;background:#f7fafc;border:1px solid var(--edge);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgb(16 41 58 / .5),0 2px 6px rgb(16 41 58 / .06)}
.aw-top{height:42px;flex:none;display:flex;align-items:center;gap:26px;padding:0 16px;background:#eef4f7;border-bottom:1px solid var(--rule);font-size:13px}
.aw-wm{position:relative;font:400 13px/18px 'Altira Open Sans',Arial,sans-serif;letter-spacing:.2em;padding:0 2px 0 8px;color:var(--ink)}
.aw-wm::before,.aw-wm::after{content:'';position:absolute;top:0;bottom:0;width:4px;border-top:1.25px solid var(--amber);border-bottom:1.25px solid var(--amber)}
.aw-wm::before{left:0;border-left:1.25px solid var(--amber)}.aw-wm::after{right:0;border-right:1.25px solid var(--amber)}
.aw-crumb u{color:var(--link)}.aw-crumb i{font-style:normal;color:var(--ink-2);margin:0 8px}
.aw-body{flex:1;display:flex;min-height:0}
.aw-side{width:206px;flex:none;display:flex;flex-direction:column;gap:1px;padding:12px 10px;background:#e0eaf0;border-right:1px solid var(--rule);font-size:12.5px;line-height:16px}
.aw-side b{display:flex;align-items:center;gap:7px;margin:14px 0 5px 4px;font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.aw-side b:first-child{margin-top:2px}
.aw-side span{padding:5px 10px 5px 26px;border-radius:4px;color:var(--ink)}
.aw-side span.on{background:#c8d8e4}
.aw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px 22px;overflow:hidden}
.aw-form{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;padding:14px;background:#eaf1f5;border:1px solid var(--rule);border-radius:4px}
.aw-form label{display:flex;flex-direction:column;gap:5px;min-width:0}
.aw-form label>span{font-weight:600;font-size:10.5px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.aw-form input,.aw-form em{display:block;height:36px;padding:0 10px;border:1px solid var(--edge);border-radius:4px;background:#fbfdfe;font:400 14px/34px var(--sans);font-style:normal;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-form input{width:100%;outline:none}
.aw-form input:focus{border-color:var(--link);box-shadow:0 0 0 2px rgb(49 93 122 / .18)}
.aw-btn{height:36px;padding:0 18px;border-radius:4px;font:500 13px/1 var(--sans);color:#fff;cursor:pointer;
  background:linear-gradient(180deg,rgb(255 255 255 / .18),rgb(255 255 255 / 0)),#425766;border:1px solid #2f4250;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 1px 2px rgb(23 59 79 / .4),0 3px 6px -1px rgb(23 59 79 / .28)}
.aw-btn.down{background-image:none;box-shadow:inset 0 1px 3px rgb(0 0 0 / .35)}
.aw-meta{min-height:18px;font-size:12.5px;line-height:18px;color:var(--ink-2)}
.aw-meta .busy::after{content:'';display:inline-block;width:10px;height:10px;margin-left:8px;border:1.5px solid var(--edge);border-top-color:var(--ink);border-radius:50%;vertical-align:-1px;animation:awspin .7s linear infinite}
@keyframes awspin{to{transform:rotate(360deg)}}
.aw-rows{display:flex;flex-direction:column;gap:8px}
.aw-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:12px 14px;background:#fbfdfe;border:1px solid var(--rule);border-radius:4px;
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.aw-row.in{opacity:1;transform:none}
.aw-row .nm{font-weight:500;font-size:15px;line-height:20px}
.aw-row .nm small{margin-left:6px;font-weight:400;font-size:12.5px;color:var(--ink-2)}
.aw-row .kind{margin-top:2px;font-weight:600;font-size:10px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--link)}
.aw-row .kind.sim{color:var(--ink-2)}
.aw-row .facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fact{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--rule);border-radius:4px;background:#f7fafc;font-size:12px;color:var(--ink-2);transition:color .25s,border-color .25s,background-color .25s}
.fact::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--edge);transition:background-color .25s}
.fact.ok{color:var(--ink);border-color:#9db8c9;background:#fbfdfe}.fact.ok::before{background:#2f7a55}
.aw-row .via{margin-top:6px;font-size:12px;line-height:16px;color:var(--ink-2)}
.aw-row .via b{font-weight:500;color:var(--ink)}
.aw-row .dec{display:flex;gap:6px;align-self:center}
.aw-row .dec .chip{height:28px;padding:0 9px;font-size:12px}
.aw-row.note{display:block;font-size:13.5px;line-height:20px;color:var(--ink)}
.aw-row.note a{color:var(--link)}

/* ---------- option 2: one name, every tool ---------- */
.s2-panel{height:var(--s2h,560px)}
.s2-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.s2-subject{position:absolute;z-index:2;left:48px;top:50%;width:236px;transform:translateY(-50%);padding:18px 20px;background:var(--page);border:1px solid var(--edge);border-radius:4px;box-shadow:0 24px 44px -30px rgb(16 41 58 / .5)}
.s2-subject b{display:block;margin-top:8px;font-weight:500;font-size:21px;line-height:27px;letter-spacing:-.01em}
.s2-subject i{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.s2-tools{position:absolute;z-index:2;left:376px;top:50%;width:286px;display:flex;flex-direction:column;gap:14px;transform:translateY(-50%)}
.s2-tool{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;height:50px;padding:0 14px;background:var(--page);border:1px solid var(--rule);border-radius:4px;
  font-weight:500;font-size:15px;color:var(--ink-2);cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s}
.s2-tool .ic{width:18px;height:18px}
.s2-tool:hover,.s2-tool.on{color:var(--ink);border-color:var(--ink)}
.s2-tool.on{box-shadow:0 12px 22px -16px rgb(16 41 58 / .55)}
.s2-tool:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.s2-tool.kept::after{content:'Kept';margin-left:auto;font-weight:600;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#2f7a55}
.s2-out{position:absolute;z-index:2;left:724px;right:48px;top:46px;height:min(300px,calc(100% - 190px));max-height:calc(100% - 120px);transition:height .3s ease;background:var(--page);border:1px solid var(--edge);border-radius:4px;box-shadow:0 26px 50px -32px rgb(16 41 58 / .5)}
.s2-card{position:absolute;inset:0;padding:22px 24px;background:transparent;border:0;
  opacity:0;transform:translateY(8px);transition:opacity .16s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.s2-card.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.16s}
.s2-card b{display:block;margin-top:10px;font-weight:500;font-size:20px;line-height:26px;letter-spacing:-.01em}
.s2-card i{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.s2-card .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.s2-card .dec{display:flex;gap:8px;margin-top:16px}
.s2-card .para{margin:16px 0 0;font-size:14.5px;line-height:22px}
.s2-card mark{background:#dce8f0;color:inherit;padding:0 2px;border-radius:1px}
.s2-card .find,.s2-card .src{display:block;margin-top:14px;font-size:12.5px;line-height:18px;color:var(--ink-2)}
.s2-card sup{font-size:10px;color:var(--link)}
.mini-graph{display:flex;align-items:center;gap:0;margin-top:22px}
.mini-graph span{height:32px;padding:0 11px;display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:4px;background:#fbfdfe;font-size:13px}
.mini-graph em{width:70px;height:1px;background:#8fa6b6}
.s2-case{position:absolute;z-index:2;left:724px;right:48px;bottom:32px;height:96px;display:flex;align-items:center;gap:14px;padding:0 22px;background:var(--page);border:1px dashed var(--edge);border-radius:4px;transition:border-color .3s}
.s2-case .ic{width:22px;height:22px;color:#425766}
.s2-case b{display:block;font-weight:500;font-size:16px;line-height:22px}
.s2-case i{display:block;font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.s2-case.saved{border-style:solid;border-color:var(--edge)}
.s2-rec{margin-left:auto;height:32px;white-space:nowrap;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:4px;font-size:13.5px;opacity:0;transition:opacity .3s}
.s2-case.saved .s2-rec{opacity:1}

/* ---------- option 3: the Record assembles ---------- */
.s3-panel{height:600px;display:grid;grid-template-columns:minmax(0,1fr) 640px minmax(0,1fr);gap:0 36px;padding:44px 48px 0;overflow:hidden}
.s3-page{position:relative;background:#fff;border:1px solid var(--rule);border-bottom:0;border-radius:4px 2px 0 0;box-shadow:0 30px 60px -34px rgb(16 41 58 / .5);overflow:hidden}
.s3-in{padding:34px 44px 40px;transition:transform 1.6s cubic-bezier(.45,0,.2,1)}
.s3-sec{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.s3-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.s3-sec.in{opacity:1;transform:none}
.s3-sec .rt{display:flex;align-items:center;justify-content:space-between}
.s3-sec .wm{font-size:13px;line-height:18px;padding-left:8px;letter-spacing:.2em}
.s3-sec .wm::before,.s3-sec .wm::after{width:4px}
.s3-sec .no{font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.s3-sec h5{margin:18px 0 0;font-weight:500;font-size:22px;line-height:28px;letter-spacing:-.01em}
.s3-sec .meta{margin:4px 0 0;font-size:12.5px;line-height:18px;color:var(--ink-2)}
.s3-sec .t-label{font-size:10px}
.s3-sec p{margin:6px 0 0;font-size:14px;line-height:21px}
.s3-sec .dim{color:var(--ink-2)}
.s3-sec .lst{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.s3-sec .lst b{display:block;font-weight:500;font-size:14px;line-height:19px}
.s3-sec .lst i{display:block;margin-top:2px;font-style:normal;font-size:12px;line-height:16px;color:var(--ink-2)}
.s3-sec .tag{align-self:flex-start;padding:3px 6px;border:1px solid var(--ink);border-radius:1px;font-weight:600;font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
.s3-sec .tag.fp{border-color:var(--edge);color:var(--ink-2)}
.s3-notes{position:relative}
.s3-notes p{position:absolute;left:0;right:0;margin:0;font-size:14px;line-height:20px;color:var(--ink);opacity:0;transition:opacity .4s ease,top .3s ease}
.s3-notes p.in{opacity:1}
.s3-notes p::after{content:'';position:absolute;top:10px;width:28px;height:1px;background:#8fa6b6}
.s3-notes.left p{text-align:right;padding-right:40px}.s3-notes.left p::after{right:0}
.s3-notes.right p{padding-left:40px}.s3-notes.right p::after{left:0}

/* ---------- the prototype's switcher (not part of the design) ---------- */
.hx-switch[hidden]{display:none}
.hx-switch{position:fixed;left:50%;bottom:16px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;border-radius:4px;background:var(--ink);box-shadow:0 10px 24px -10px rgb(0 0 0 / .5)}
.hx-switch span{padding:0 8px 0 6px;font-size:12px;color:#b8c9d4}
.hx-switch button{all:unset;cursor:pointer;height:28px;padding:0 10px;border-radius:4px;font-size:12.5px;line-height:28px;color:#fff;white-space:nowrap}
.hx-switch button.on{background:#fff;color:var(--ink)}
.hx-switch button:focus-visible{outline:2px solid #8dc8ea}
.still .hx-switch{display:none}

@media (max-width:1439px){
  .hero{padding-top:36px}
  .hx-stage{margin-top:28px}
  .hx-side .t-body{font-size:16px;line-height:24px}
}
@media (max-width:1279px){
  .s2-rec{display:none}
}
@media (max-width:1199px) and (min-width:601px){
  .s2-tools{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .s2-tool{height:auto;min-height:50px;padding:8px 12px;line-height:19px;white-space:normal}
}
@media (max-width:1279px) and (min-width:1200px){
  .s2-card{padding:18px 18px}
}
@media (max-width:1199px){
  .hx-head{grid-template-columns:minmax(0,1fr)}
  .hx-head h1,.hx-side,.hx-acts{grid-column:auto;grid-row:auto}
  .hx-side{max-width:600px}
  .aw-side{display:none}
  .s2-panel{height:auto;padding:56px 24px 24px}
  .s2-lines{display:none}
  .s2-subject,.s2-tools,.s2-out,.s2-case{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto}
  .s2-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:16px}
  .s2-out{height:300px;margin-top:16px}
  .s2-case{margin-top:16px;height:96px}
  .s3-panel{grid-template-columns:minmax(0,1fr);padding:44px 24px 0}
  .s3-notes{display:none}
}
@media (max-width:600px){
  .hero{padding-top:40px}
  .hx-acts .btn{flex:1 1 auto;justify-content:center}
  .hx-stage{margin-top:32px}
  .s1-panel{padding:12px 12px 0}
  .s1-try{height:auto;padding:14px 0;gap:8px}
  .s1-try .t-label{width:100%}
  .s1-try .hint{display:none}
  .s1 .sample{margin-left:0}
  .appwin{height:520px}
  .aw-top{gap:14px}
  .aw-main{padding:12px}
  .aw-form{grid-template-columns:minmax(0,1fr) auto;padding:10px}
  .aw-form label:not(.f-name){display:none}
  .aw-row{grid-template-columns:minmax(0,1fr)}
  .aw-row .dec{display:none}
  .s2-out{height:330px}
  .s2-tools{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .s2-tool:last-child{grid-column:1 / -1}
  .s2-tool{height:auto;min-height:46px;padding:8px 10px;font-size:13.5px;line-height:18px;white-space:normal}
  .s2-panel{padding-top:88px}
  .s2-panel .sample{top:50px;left:16px;right:auto}
  .s2-case{height:auto;flex-wrap:wrap;padding:16px 18px;gap:10px 14px}
  .s2-case>div{flex:1 1 calc(100% - 40px);min-width:0}
  .s2-rec{margin-left:36px;white-space:nowrap}
  .s2-card{padding:18px}
  .s3-panel{height:560px;padding:52px 12px 0}
  .s3-in{padding:24px 20px 32px}
  .s3-sec .lst{flex-direction:column;gap:4px}
  .hx-switch span{display:none}
}