/* /3d-websites (unlisted, Eli 10/14). Loads after hub.css and BEFORE theme-final-site.css; every rule is td-* scoped, so the
   theme's shared pieces (band-head, slate, frame, ss-how, ss-draw, free-row) keep their look. Tokens come from the theme. */

/* reserve the header's height before hub.js draws it (no shift of main) */
.site-top{min-height:53px}
@media (min-width:900px){.site-top{min-height:65px}}

.td-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- hero: text + our home page recorded at laptop (16:9 browser) and phone size ---------- */
.td-hero-grid{display:grid;gap:32px;align-items:center}
.td-hero .band-head{margin-bottom:0}
.page-hero.td-hero h1{font-size:clamp(36px,9vw,64px);line-height:1}
.page-hero.td-hero h1 em{display:block}
@media (min-width:700px) and (max-width:1099px){.page-hero.td-hero h1{font-size:min(6.4vw,54px)}}
.td-hero .lede{max-width:52ch}
.td-facts{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;max-width:56ch}
.td-facts li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--body-c)}
.td-facts li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--check) center/15px no-repeat}
.td-hero-go{margin:8px 0 0}
.td-hero-go .btn{display:inline-flex;align-items:center;min-height:52px}
.td-media{position:relative;min-width:0}
.td-media video{display:block;width:100%;height:100%;object-fit:cover}
/* phones: the phone recording only */
.frame.td-browser{display:none;margin:0}
.frame.td-phone{display:block;margin:0 auto;width:min(280px,74vw)}
.td-phone .td-phone-pic{aspect-ratio:540/1168;border-radius:22px;background:var(--navy)}
/* the browser: a drawn window, a mono address bar, the 16:9 recording */
.td-browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1.75px solid var(--blue);border-bottom:0;border-radius:6px 6px 0 0;background:var(--paper)}
.td-browser-bar i{width:9px;height:9px;border:1px solid var(--blue);border-radius:50%}
.td-browser-bar span{flex:1;margin-left:10px;padding:3px 10px;border:1px solid var(--line-soft);border-radius:2px;font:500 12px/1.2 var(--f-mono);letter-spacing:.06em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-browser .td-browser-pic{aspect-ratio:16/9;border:1.75px solid var(--blue);border-radius:0 0 6px 6px;outline:0;background:var(--navy)}
@media (min-width:700px){
  .td-media{padding-bottom:64px}
  .frame.td-browser{display:block;width:88%}
  .frame.td-browser .frame-cap{text-align:left}
  .frame.td-phone{position:absolute;right:0;bottom:0;width:25%;min-width:150px;margin:0}
  .td-phone .td-phone-pic{border-radius:16px;outline-offset:3px}
  .frame.td-phone .frame-cap{display:none}
}
@media (min-width:1100px){
  .td-hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px}
  .page-hero.td-hero h1{font-size:clamp(40px,3.9vw,58px)}
}

/* ---------- what you'll build: three drawn cards ---------- */
.td-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.td-type{display:grid;align-content:start;gap:10px;padding:18px 18px 22px;border:1.75px solid var(--blue);background:var(--paper)}
.td-type h3{margin:6px 0 0;font-size:24px;line-height:1.15}
.td-type p{margin:0;font-size:16px;line-height:1.5;color:var(--body-c)}
.td-type .td-draw{width:100%;margin:0;padding:10px;border:1px dashed var(--line-soft);background:var(--ground)}
.td-type .td-draw svg{display:block;aspect-ratio:240/160}
.td-type .td-draw text{font-size:9px}

/* ---------- what you need ---------- */
.td-need{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px;border-top:1.75px solid var(--blue)}
.td-need li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-bottom:1px dashed var(--line-soft);
  font-size:18px;line-height:1.5;color:var(--body-c)}
.td-need li .ss-key{margin-top:3px}
.td-need b{color:var(--ink)}

/* ---------- how it works: the theme's step row, four across on desktop ---------- */
.td-how-d{margin:0;grid-column:2;font-size:16px;line-height:1.5;color:var(--body-c)}
@media (min-width:900px){
  .td-how.ss-how{grid-template-columns:repeat(4,minmax(0,1fr))}
  .td-how-d{grid-column:auto}
}

/* ---------- outline (headings only) ---------- */
.td-outline{list-style:none;margin:0;padding:0;max-width:760px;border-top:1.75px solid var(--blue)}
.td-outline li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.td-outline-n{font:600 15px/1 var(--f-mono);color:var(--blue)}
.td-outline-t{font:800 clamp(20px,3vw,26px)/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ink)}

/* ---------- FAQ ---------- */
.td-faq-grid{display:grid;gap:8px}
.td-faq{border-top:1.75px solid var(--blue);max-width:760px}
.td-q{border-bottom:1px solid var(--line-soft)}
.td-q summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;min-height:60px;padding:12px 0;
  font:700 18px/1.35 var(--f-display);color:var(--ink)}
.td-q summary::-webkit-details-marker{display:none}
.td-q summary:hover{color:var(--blue)}
.td-q-tog{position:relative;width:28px;height:28px;border:1px solid var(--line-soft);border-radius:50%}
.td-q-tog::before,.td-q-tog::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--blue);transform:translate(-50%,-50%)}
.td-q-tog::after{transform:translate(-50%,-50%) rotate(90deg)}
.td-q[open] .td-q-tog::after{display:none}
.td-q p{margin:0;padding:0 44px 20px 0;font-size:16.5px;line-height:1.55;color:var(--body-c)}
@media (max-width:600px){.td-q p{padding-right:0}}
@media (min-width:900px){.td-faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}}

/* ---------- close ---------- */
.td-close{display:grid;gap:12px;max-width:calc(760px + 2 * var(--gutter))}
.td-close h2{margin:4px 0 0;font-size:clamp(30px,5.6vw,48px);line-height:1.05}
.td-close>p{margin:0;font-size:18px;color:var(--body-c)}
.td-close .slate{margin:0}
.td-close .td-close-k{margin-top:20px;font:500 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute-c)}
.td-links{list-style:none;margin:0;padding:0;border-top:1.75px solid var(--blue)}
.td-links li+li{border-top:1px dashed var(--line-soft)}
.td-link{min-height:60px}
/* 10/14: STUDIO's Orrin flagship as the hero, a single 9:16 phone (540x960) on every width */
.td-phone-solo .td-phone-pic{aspect-ratio:540/960}
@media (min-width:700px){
  .td-media.td-media-solo{padding-bottom:0}
  .frame.td-phone.td-phone-solo{position:static;width:min(340px,100%);margin:0 auto}
  .frame.td-phone.td-phone-solo .frame-cap{display:block;text-align:center}
}
@media (min-width:1100px){ .td-hero-grid:has(.td-media-solo){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.td-hero-go .btn + .btn{margin-left:10px}
@media (max-width:520px){ .td-hero-go .btn + .btn{margin:10px 0 0} }

/* ---------- 10/15: the page is on sale. Buy box + button + trust strip in the hero; the "what's inside" list; buy repeats ---------- */
.td-buy{display:grid;gap:12px;margin:6px 0 4px;max-width:520px}
.td-buy .ss-due{margin:0}
.td-buy .td-hero-go{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.td-buy .td-hero-go .btn+.btn{margin-left:0}
.td-buy .td-hero-go .btn-ember{flex:1 1 280px;justify-content:center;gap:12px;white-space:nowrap}
.td-buy .td-hero-go .btn-ghost{flex:1 1 180px;justify-content:center}
.td-buy .ss-strip{margin:0}
.td-buy-btn{min-height:56px}
.td-buy-btn .btn-amt{margin-left:2px}
.td-inside-go{margin:22px 0 0}
.td-inside-go .btn,.td-close .td-hero-go .btn{min-height:56px;gap:12px}
.td-hero .td-facts{margin-top:14px}
/* the inside list: number · title · kind */
.td-outline.td-inside li{grid-template-columns:44px minmax(0,1fr) auto}
.td-kind{font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border:1px solid var(--line-soft);color:var(--mute-c);background:var(--paper)}
.td-kind-build{border-color:var(--blue);color:var(--blue)}
.td-extra .td-outline-t{font-size:clamp(18px,2.6vw,22px)}
@media (max-width:520px){.td-outline.td-inside li{grid-template-columns:36px minmax(0,1fr)}.td-outline.td-inside .td-kind{grid-column:2;justify-self:start}}