/* ============================================================
   scoy.ai - front-door pages (keyword landing pages)

   One stylesheet for every front door: /agentic-os (the hub) and the
   pages that hang off it (/ai-email-assistant, /invoice-follow-up ...).
   The other pages on this site keep their layout in inline styles. These
   pages do not, because ten of them have to stay identical: change a block
   here and every front door changes with it.

   Loads after scoy.css, which holds the brand tokens (--navy, --cream,
   --gold-2, --serif ...). Every class starts with fd- so nothing here can
   collide with the older pages.

   Blocks, top to bottom (template: templates/front-door/page.html):
     header (.fd-head)          same nav on every front door
     breadcrumb (.fd-crumbs)    Home > Agentic OS [> this page]
     hero (.fd-hero)            H1 with the searched term, subhead, the one
                                button, a proof line, and a screenshot slot
     section (.fd-sec)          heading + body, two-column on desktop
     schedule (.fd-sched)       a table that turns into stacked rows on a phone
     cards (.fd-cards)          tool cards; a card is a link only once its page exists
     audience (.fd-who)         who it is for, with the not-for card dimmed
     steps (.fd-steps)          how starting works
     product box (.fd-product)  spokes only: points back at the hub
     FAQ (.fd-faq)              <details>, mirrored word for word in FAQPage schema
     closing CTA (.fd-cta)      the same one button again
     footer (.fd-foot)
   ============================================================ */

.fd-page{ background:var(--navy); color:var(--cream); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; }
.fd-wrap{ max-width:1240px; margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); }
.fd-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- header ------------------------------------------------ */
.fd-head{ position:sticky; top:0; z-index:60; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(11,17,30,0.62); border-bottom:1px solid var(--line); }
.fd-headbar{ height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.fd-logo{ display:flex; align-items:center; gap:11px; color:var(--cream); text-decoration:none; }
.fd-logo svg{ width:25px; height:25px; color:var(--gold-2); }
.fd-logo span{ font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:-0.01em; line-height:1; }
.fd-logo b{ font-weight:700; color:var(--gold-2); }
.fd-nav{ display:flex; gap:30px; font-size:14px; }
.fd-nav a{ color:var(--cream); opacity:0.82; text-decoration:none; transition:opacity .2s ease; }
.fd-nav a:hover{ opacity:.6; }
.fd-nav a[aria-current="page"]{ opacity:1; color:var(--gold-2); }
.fd-head-cta{ display:inline-flex; align-items:center; height:38px; padding:0 15px; border-radius:999px; border:1px solid var(--line-2); color:var(--cream); font-size:13px; text-decoration:none; white-space:nowrap; transition:border-color .2s ease, color .2s ease; }
.fd-head-cta:hover{ border-color:var(--gold-2); color:var(--gold-2); }

/* --- the one button ---------------------------------------- */
.fd-btn{ display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 28px; border-radius:999px; background:var(--cream); color:var(--navy); font-size:16px; font-weight:500; text-decoration:none; transition:background .2s ease; }
.fd-btn:hover{ background:var(--gold-2); }
.fd-btn i{ font-family:var(--serif); font-style:italic; }

/* --- breadcrumb -------------------------------------------- */
.fd-crumbs{ padding-top:22px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); }
.fd-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fd-crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-2); }
.fd-crumbs a{ color:var(--slate); text-decoration:none; transition:color .2s ease; }
.fd-crumbs a:hover{ color:var(--cream); }
.fd-crumbs [aria-current="page"]{ color:var(--cream-dim); }

/* --- type -------------------------------------------------- */
.fd-eyebrow{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-2); margin:0 0 18px; }
.fd-h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,4.9vw,70px); line-height:1.04; letter-spacing:-0.02em; color:var(--cream); margin:0; padding-bottom:0.12em; text-wrap:balance; }
/* The searched term stays INSIDE the h1 as its small first line, so the
   heading Google reads still starts with it. */
.fd-h1-term{ display:block; font-family:var(--sans); font-size:12px; line-height:1.2; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-2); margin:0 0 20px; }
.fd-h1 em{ font-style:italic; color:var(--gold-2); }
.fd-h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,3.9vw,52px); line-height:1.05; letter-spacing:-0.02em; color:var(--cream); margin:0; text-wrap:balance; }
.fd-lede{ font-size:19px; line-height:1.55; color:var(--cream-dim); margin:28px 0 0; max-width:52ch; }
.fd-body p{ font-size:17px; line-height:1.65; color:var(--cream-dim); margin:0 0 18px; max-width:62ch; }
.fd-body p:last-child{ margin-bottom:0; }
.fd-body strong{ color:var(--cream); font-weight:500; }
/* A quoted line inside body copy. The curly quotes are in the markup, not
   generated by CSS, so they are part of the text Google and the checker read. */
.fd-quote{ font-family:var(--serif); font-style:italic; font-size:1.18em; color:var(--gold-2); }
.fd-kicker{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,30px) !important; line-height:1.3 !important; color:var(--gold-2) !important; }

/* --- hero -------------------------------------------------- */
.fd-hero{ padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(56px,7vw,96px); display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(36px,5vw,72px); align-items:center; }
.fd-hero-cta{ margin-top:34px; }
.fd-proof{ display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; max-width:54ch; font-size:13px; line-height:1.55; color:var(--slate); }
.fd-proof::before{ content:""; flex:none; width:7px; height:7px; margin-top:6px; border-radius:50%; background:#6FB58A; box-shadow:0 0 8px #6FB58A; animation:aoPulse 2.4s ease-in-out infinite; }

/* Screenshot slot. Every front door has one in the hero, and a section can
   carry one too. Real screenshots only, with names, addresses and amounts
   blurred. Never a mock-up. width/height go on the <img> so the column
   does not jump while it loads. */
.fd-shot{ margin:0; }
.fd-shot img{ width:100%; height:auto; border-radius:18px; border:1px solid var(--line-2); background:var(--navy-2); box-shadow:0 30px 80px -40px rgba(0,0,0,0.8); }
.fd-shot figcaption{ margin-top:12px; font-size:12px; letter-spacing:0.04em; color:var(--slate); }

/* --- motion graphic (.fd-run) -------------------------------
   The hero visual: a few jobs tick off one by one, then the 7:30 email
   lands, it holds, and it starts again. Big type and the page's own words,
   so it reads at a glance on a phone. It is real text, not a picture.
   assets/js/fd-run.js drives it by adding .is-anim (motion on), .is-on per
   step, .is-end for the finale and .is-out to fade before the next loop.
   With no JS, or with reduced motion asked for, the finished frame is what
   shows, still. */
.fd-run{ position:relative; isolation:isolate; overflow:hidden; margin:0; border:1px solid var(--line-2); border-radius:22px; padding:clamp(26px,3.4vw,42px); background:linear-gradient(160deg, var(--navy-3), var(--navy-2) 60%); box-shadow:0 30px 80px -40px rgba(0,0,0,0.85); --p:1; }
.fd-run::after{ content:""; position:absolute; z-index:-1; right:-18%; bottom:-38%; width:85%; height:95%; background:radial-gradient(closest-side, rgba(180,138,90,0.34), transparent); opacity:1; transition:opacity 1.4s ease; pointer-events:none; }
.fd-run-tag{ display:flex; align-items:center; gap:10px; margin:0 0 28px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--slate); }
.fd-run-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:#6FB58A; box-shadow:0 0 8px #6FB58A; animation:aoPulse 2.4s ease-in-out infinite; }
.fd-run-steps{ position:relative; list-style:none; margin:0; padding:0; display:grid; gap:20px; }
/* the rail between the checks, and its gold fill (--p is 0 to 1) */
.fd-run-steps::before, .fd-run-steps::after{ content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px; border-radius:2px; background:var(--line); }
.fd-run-steps::after{ background:var(--gold-2); transform-origin:top; transform:scaleY(var(--p)); transition:transform .9s cubic-bezier(.22,1,.36,1); }
.fd-run-step{ position:relative; z-index:1; display:flex; align-items:center; gap:18px; font-size:clamp(19px,1.95vw,26px); line-height:1.25; color:var(--cream); }
.fd-run-check{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--gold-2); background:var(--navy-3); color:var(--gold-2); }
.fd-run-check svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.fd-run-check path{ stroke-dasharray:24; stroke-dashoffset:0; }
.fd-run-end{ margin-top:32px; padding-top:26px; border-top:1px solid var(--line); }
.fd-run-time{ display:block; font-family:var(--serif); font-size:clamp(76px,9vw,132px); line-height:0.88; letter-spacing:-0.03em; color:var(--gold-2); }
.fd-run-line{ display:block; margin-top:12px; font-family:var(--serif); font-style:italic; font-size:clamp(21px,2.1vw,30px); line-height:1.2; color:var(--cream); }

@keyframes fdPing{ 0%{ box-shadow:0 0 0 0 rgba(180,138,90,0.6); } 100%{ box-shadow:0 0 0 16px rgba(180,138,90,0); } }
.fd-run.is-anim{ --p:0; }
.fd-run.is-anim::after{ opacity:0.25; }
.fd-run.is-anim.is-end::after{ opacity:1; }
.fd-run.is-anim .fd-run-step{ opacity:0; transform:translateX(-16px); transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.fd-run.is-anim .fd-run-step.is-on{ opacity:1; transform:none; }
.fd-run.is-anim .fd-run-check path{ stroke-dashoffset:24; transition:stroke-dashoffset .45s ease .2s; }
.fd-run.is-anim .fd-run-step.is-on .fd-run-check path{ stroke-dashoffset:0; }
.fd-run.is-anim .fd-run-step.is-on .fd-run-check{ animation:fdPing .9s ease-out .15s; }
.fd-run.is-anim .fd-run-end{ border-top-color:transparent; transition:border-color .8s ease; }
.fd-run.is-anim.is-end .fd-run-end{ border-top-color:var(--line); }
.fd-run.is-anim .fd-run-time, .fd-run.is-anim .fd-run-line{ opacity:0; transform:translateY(18px) scale(0.97); transform-origin:left bottom; transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.fd-run.is-anim.is-end .fd-run-time{ opacity:1; transform:none; }
.fd-run.is-anim.is-end .fd-run-line{ opacity:1; transform:none; transition-delay:.3s; }
.fd-run.is-anim.is-out .fd-run-step.is-on, .fd-run.is-anim.is-out.is-end .fd-run-time, .fd-run.is-anim.is-out.is-end .fd-run-line{ opacity:0; transition:opacity .6s ease; transition-delay:0s; }

/* --- job sections with a stamp (.fd-job, .fd-stamp) ---------
   One section per job: a stamp card with the one real figure from the
   job's "Ours:" line (8:40, every hour ...), then the text. Desktop puts
   them side by side and alternates the side; a phone stacks the stamp
   above the text. The stamp rises in once when it scrolls into view
   ([data-fd-in], fd-run.js). */
.fd-job{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:center; }
.fd-job + .fd-job{ margin-top:clamp(64px,8vw,110px); }
.fd-job:nth-child(even) .fd-stamp{ order:2; }
.fd-job .fd-h2{ font-size:clamp(28px,3.2vw,44px); margin-bottom:22px; }
.fd-job-n{ font-style:italic; color:var(--gold-2); }
.fd-h2 a{ color:inherit; text-decoration:none; background:linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/0 1px no-repeat; transition:background-size .4s ease, color .2s ease; }
.fd-h2 a:hover{ color:var(--gold-2); background-size:100% 1px; }
.fd-h2 a::after{ content:" \2192"; font-style:italic; color:var(--gold-2); }
.fd-body a{ color:var(--gold-2); text-decoration:none; }
.fd-body a:hover{ text-decoration:underline; text-underline-offset:3px; }
.fd-ours{ border-left:2px solid var(--gold-2); padding-left:16px; }

.fd-stamp{ position:relative; isolation:isolate; overflow:hidden; margin:0; min-height:clamp(220px,24vw,300px); display:flex; flex-direction:column; justify-content:space-between; gap:28px; border:1px solid var(--line-2); border-radius:22px; padding:clamp(24px,3vw,36px); background:linear-gradient(160deg, var(--navy-3), var(--navy-2) 60%); box-shadow:0 30px 80px -40px rgba(0,0,0,0.85); }
.fd-stamp::after{ content:""; position:absolute; z-index:-1; right:-20%; bottom:-45%; width:90%; height:100%; background:radial-gradient(closest-side, rgba(180,138,90,0.3), transparent); pointer-events:none; }
.fd-stamp-tag{ display:flex; align-items:center; gap:10px; margin:0; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--slate); }
.fd-stamp-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:#6FB58A; box-shadow:0 0 8px #6FB58A; animation:aoPulse 2.4s ease-in-out infinite; }
.fd-stamp-tag b{ margin-left:auto; font-family:var(--serif); font-style:italic; font-weight:400; font-size:18px; letter-spacing:0; text-transform:none; color:var(--gold-2); }
.fd-stamp-fig{ display:block; font-family:var(--serif); font-size:clamp(72px,8vw,120px); line-height:0.9; letter-spacing:-0.03em; color:var(--gold-2); }
.fd-stamp-fig--word{ font-size:clamp(52px,5.6vw,84px); line-height:0.95; }
.fd-stamp-fig svg{ width:clamp(70px,7vw,100px); height:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fd-stamp-cap{ display:block; margin-top:14px; font-family:var(--serif); font-style:italic; font-size:clamp(20px,1.9vw,26px); line-height:1.25; color:var(--cream); }
.fd-stamp.is-anim .fd-stamp-fig, .fd-stamp.is-anim .fd-stamp-cap{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1); }
.fd-stamp.is-anim .fd-stamp-cap{ transition-delay:.2s; }
.fd-stamp.is-anim::after{ opacity:0; transition:opacity 1.4s ease .2s; }
.fd-stamp.is-anim.is-in .fd-stamp-fig, .fd-stamp.is-anim.is-in .fd-stamp-cap{ opacity:1; transform:none; }
.fd-stamp.is-anim.is-in::after{ opacity:1; }

/* --- sections ---------------------------------------------- */
.fd-sec{ border-top:1px solid var(--line); }
.fd-sec--tint{ background:var(--navy-2); }
.fd-sec-in{ padding-top:clamp(64px,7vw,104px); padding-bottom:clamp(64px,7vw,104px); }
.fd-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.fd-split .fd-h2{ position:sticky; top:100px; }
.fd-head2{ max-width:760px; margin-bottom:clamp(32px,4vw,48px); }
.fd-head2 .fd-body{ margin-top:22px; }

/* --- schedule table ---------------------------------------- */
.fd-sched{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--navy); }
.fd-sched table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.fd-sched th{ text-align:left; font-weight:500; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-2); padding:16px 22px; border-bottom:1px solid var(--line-2); background:var(--navy-3); }
.fd-sched td{ padding:16px 22px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--cream-dim); }
.fd-sched tr:last-child td{ border-bottom:none; }
.fd-sched td:first-child{ font-family:var(--serif); font-size:20px; line-height:1.2; color:var(--cream); white-space:nowrap; width:1%; }
.fd-sched td:last-child{ color:var(--slate); }

/* --- tool cards -------------------------------------------- */
.fd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fd-card{ display:flex; flex-direction:column; gap:10px; background:var(--navy-2); border:1px solid var(--line); border-radius:18px; padding:28px 26px; color:inherit; text-decoration:none; }
.fd-card h3{ font-size:17px; font-weight:500; color:var(--cream); margin:0; }
.fd-card p{ font-size:14px; line-height:1.6; color:var(--slate); margin:0; }
/* Only a card whose page exists is an <a>. Until then it is an <article> and
   gets no hover, so nothing on the page looks clickable and goes to a 404. */
a.fd-card{ transition:border-color .25s ease, background .25s ease, transform .25s ease; }
a.fd-card:hover{ border-color:var(--line-2); background:var(--navy-3); transform:translateY(-3px); }
a.fd-card h3::after{ content:" \2192"; font-family:var(--serif); font-style:italic; color:var(--gold-2); }

/* --- who it is for ----------------------------------------- */
.fd-who{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fd-who > div{ border:1px solid var(--line); border-radius:18px; padding:28px 26px; background:var(--navy-2); }
.fd-who p{ font-size:15px; line-height:1.65; color:var(--slate); margin:0; }
.fd-who strong{ display:block; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.2; color:var(--cream); margin-bottom:12px; }
.fd-who .fd-notfor{ background:transparent; border-style:dashed; }
.fd-who .fd-notfor strong{ color:var(--cream-dim); }

/* --- steps ------------------------------------------------- */
.fd-steps{ list-style:none; margin:0; padding:0; counter-reset:fd-step; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fd-steps li{ counter-increment:fd-step; border-top:1px solid var(--line-2); padding-top:22px; font-size:16px; line-height:1.65; color:var(--slate); }
.fd-steps li::before{ content:counter(fd-step, decimal-leading-zero); display:block; font-family:var(--serif); font-style:italic; font-size:30px; line-height:1; color:var(--gold-2); margin-bottom:16px; }
.fd-steps strong{ color:var(--cream); font-weight:500; }

/* --- product box (spokes only) ----------------------------- */
.fd-product{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:28px; align-items:center; border:1px solid var(--line-2); border-radius:20px; padding:24px; background:var(--navy-2); color:inherit; text-decoration:none; transition:border-color .25s ease; }
.fd-product:hover{ border-color:var(--gold-2); }
.fd-product img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.fd-product p{ font-size:17px; line-height:1.6; color:var(--cream-dim); margin:0 0 14px; }
.fd-product span{ font-size:14px; color:var(--gold-2); }

/* --- FAQ --------------------------------------------------- */
.fd-faq{ max-width:900px; }
.fd-faq details{ border-top:1px solid var(--line); }
.fd-faq details:last-child{ border-bottom:1px solid var(--line); }
.fd-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 0; font-size:18px; line-height:1.4; color:var(--cream); transition:color .2s ease; }
.fd-faq summary::-webkit-details-marker{ display:none; }
.fd-faq summary:hover{ color:var(--gold-2); }
.fd-faq summary::after{ content:"+"; font-family:var(--serif); font-size:26px; line-height:1; color:var(--gold-2); flex:none; transition:transform .25s ease; }
.fd-faq details[open] summary::after{ transform:rotate(45deg); }
.fd-faq details p{ font-size:16px; line-height:1.7; color:var(--slate); margin:0 0 24px; max-width:70ch; }
.fd-faq details a{ color:var(--gold-2); text-decoration:none; }
.fd-faq details a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* --- closing CTA ------------------------------------------- */
.fd-cta{ position:relative; overflow:hidden; text-align:center; border-top:1px solid var(--line); }
.fd-cta::before{ content:""; position:absolute; inset:-10%; background:radial-gradient(42% 60% at 50% 42%, rgba(180,138,90,0.13), transparent 62%); pointer-events:none; }
.fd-cta .fd-wrap{ position:relative; padding-top:clamp(80px,10vw,140px); padding-bottom:clamp(80px,10vw,140px); }
.fd-cta .fd-h2{ font-size:clamp(38px,5vw,72px); max-width:18ch; margin:0 auto; }
.fd-cta p{ font-size:19px; line-height:1.55; color:var(--cream-dim); margin:26px auto 34px; max-width:48ch; }

/* --- footer ------------------------------------------------ */
.fd-foot{ border-top:1px solid var(--line); padding:48px 0 40px; }
.fd-foot .fd-wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.fd-foot small{ font-size:12px; color:var(--slate); letter-spacing:0.04em; }
.fd-foot small a{ color:var(--slate); text-underline-offset:2px; }

/* --- tablet ------------------------------------------------ */
@media (max-width:900px){
  .fd-hero{ grid-template-columns:1fr; }
  .fd-split{ grid-template-columns:1fr; }
  .fd-split .fd-h2{ position:static; }
  .fd-cards, .fd-who, .fd-steps{ grid-template-columns:1fr 1fr; }
  /* one column, the stamp always above its text */
  .fd-job{ grid-template-columns:1fr; gap:26px; }
  .fd-job:nth-child(even) .fd-stamp{ order:0; }
  .fd-stamp{ min-height:0; }
}

/* --- phone ------------------------------------------------- */
@media (max-width:768px){
  /* The logo and the button hold the top row; the nav drops underneath and
     scrolls sideways, the same as the homepage, so a phone keeps the nav. */
  .fd-headbar{ flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:9px; row-gap:9px; }
  .fd-nav{ order:3; width:100%; gap:20px; font-size:13px; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .fd-nav::-webkit-scrollbar{ display:none; }
  .fd-lede{ font-size:18px; }
  .fd-body p{ font-size:16px; }
  .fd-cards, .fd-who, .fd-steps{ grid-template-columns:1fr; }
  .fd-product{ grid-template-columns:1fr; }
}

/* Under 640px the schedule stops being a table and becomes stacked rows:
   the time on top, then what runs, then what you see under its own label.
   The roles on the markup keep it a table for screen readers, which drop
   table semantics once display changes. */
@media (max-width:640px){
  .fd-sched{ border:none; border-radius:0; background:transparent; overflow:visible; }
  .fd-sched table, .fd-sched tbody, .fd-sched tr, .fd-sched td{ display:block; width:auto; }
  .fd-sched thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .fd-sched tr{ border:1px solid var(--line); border-radius:14px; background:var(--navy-2); padding:16px 18px; margin-bottom:12px; }
  .fd-sched td{ padding:0; border:none; }
  .fd-sched td:first-child{ width:auto; white-space:normal; font-size:22px; margin-bottom:8px; }
  .fd-sched td:nth-child(2){ color:var(--cream-dim); }
  .fd-sched td:last-child{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
  .fd-sched td:last-child::before{ content:attr(data-label); display:block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-2); margin-bottom:4px; }
}