/* ===========================================================================
   crestnotch.app/take, Take 4's own look (2026-10-06).

   /take sits on the product pages' kit (page.css) like /crest and /minutes,
   and this file dresses it in Take 4's design: the app's blue for the one
   thing to press, its icon tiles and colours, and its seven backdrops under
   every picture, so each window on the page is staged the way Take stages a
   take. Every value here is read from Take's tokens
   (~/dev/take/Sources/Take/Surfaces/Take4Style.swift) and the approved
   prototype (design/redesign-2026-10/src: style.css, art.js BACKDROPS,
   look.js LOOK_SWITCHES, the first run's four jobs). Only body.take is styled,
   so no other page changes. Hashed by Scripts/hash_site_assets.py.
   =========================================================================== */

/* ------------------------------------------------------------- the accent */
/* Take's blue (--blue #0A84FF in the app) in place of Crest's amber. As a
   button ground it is #0071E3, the same blue a shade deeper, so white words on
   it pass 4.5:1; as words it is #2997FF on black and #0066CC on paper. */
body.take{
  --amber:#2997FF; --amber-live:#0071E3; --amber-hi:#0077ED; --amber-ink:#FFFFFF; --link:#0066CC;
  --tk-blue:#0A84FF; --tk-red:#FF453A; --tk-orange:#FF9F0A; --tk-yellow:#FFD60A; --tk-green:#30D158;
  --tk-purple:#BF5AF2; --tk-indigo:#5E5CE6; --tk-gray:#8E8E93; --tk-win:#1F1F22;
}
body.take :focus-visible{outline-color:var(--tk-blue)}
body.take .btn-primary,body.take .btn-primary:hover{color:#fff}
body.take .rev-stars,body.take .rev-pick button.on{color:var(--tk-orange)}
body.take .plans .plan.pick{box-shadow:0 0 0 2px var(--amber-live)}
body.take .plans .plan .tag{background:#E8F1FD;color:#0058B0}

/* ---------------------------------------------------------- the backdrops */
/* Take's seven backdrops (art.js BACKDROPS; the same description drives the
   app's compositor): two soft glows over a linear gradient. A picture card
   (.pane-shot) wears one in place of the kit's wallpaper. */
.take .tk-dawn{background:radial-gradient(75% 90% at 4% 0%,rgba(255,220,170,.95) 0%,rgba(255,220,170,0) 100%),radial-gradient(75% 90% at 100% 100%,rgba(84,58,255,.85) 0%,rgba(84,58,255,0) 100%),linear-gradient(135deg,#ffa184 0%,#ff5f8c 50%,#8b5cff 100%)}
.take .tk-lagoon{background:radial-gradient(70% 80% at 8% 4%,rgba(170,255,232,.85) 0%,rgba(170,255,232,0) 100%),radial-gradient(70% 90% at 96% 98%,rgba(24,40,170,.8) 0%,rgba(24,40,170,0) 100%),linear-gradient(140deg,#33d3c4 0%,#2f76ff 55%,#4a2fd0 100%)}
.take .tk-meadow{background:radial-gradient(60% 70% at 2% 2%,rgba(255,252,210,.85) 0%,rgba(255,252,210,0) 100%),radial-gradient(70% 80% at 100% 100%,rgba(14,110,124,.75) 0%,rgba(14,110,124,0) 100%),linear-gradient(135deg,#e6f59c 0%,#7fdca6 50%,#1c9c95 100%)}
.take .tk-ember{background:radial-gradient(60% 70% at 10% 0%,rgba(255,244,196,.85) 0%,rgba(255,244,196,0) 100%),radial-gradient(70% 80% at 100% 100%,rgba(150,20,90,.7) 0%,rgba(150,20,90,0) 100%),linear-gradient(135deg,#ffd27a 0%,#ff7b47 50%,#d9336d 100%)}
.take .tk-graphite{background:radial-gradient(80% 70% at 50% -10%,rgba(120,124,140,.55) 0%,rgba(120,124,140,0) 100%),linear-gradient(180deg,#3a3c45 0%,#121317 100%)}
/* The kit's card, restyled: no wallpaper under it, Take's padding and
   corners, the picture floating with the app's own shadow. */
.take .pane-shot{max-width:1120px;border-radius:clamp(18px,2.2vw,30px);padding:clamp(16px,4.6vw,64px);isolation:isolate}
.take .pane-shot .cut{box-shadow:none;filter:drop-shadow(0 18px 34px rgba(10,6,30,.38)) drop-shadow(0 3px 8px rgba(10,6,30,.2))}
/* Windows with their own rounded corners (transparent outside them) get a
   shadow that follows the window, not the picture's rectangle. */
.take .pane-shot.tall{max-width:560px}

/* ----------------------------------------------------------------- the hero */
.take .tk-hero{padding-bottom:clamp(64px,8vw,120px);background:
  radial-gradient(64% 34% at 50% 62%,rgba(255,95,140,.16) 0%,rgba(255,95,140,0) 100%),#000}
.take .tk-new{margin:0 auto 26px;display:flex;justify-content:center}
.take .tk-new a{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);font-size:14px;font-weight:500;color:var(--onb2);transition:background-color .2s ease}
.take .tk-new a:hover{background:rgba(255,255,255,.13);color:var(--onb1)}
.take .tk-new b{padding:3px 9px;border-radius:999px;background:var(--tk-blue);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:0}
.take .page-hero .name{display:flex;align-items:center;justify-content:center;gap:12px}
.take .tk-icon{width:clamp(34px,3vw,44px);height:auto;flex:0 0 auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
/* The editor on Take's Dawn backdrop: the window staged the way Take stages
   a take. On arrival the backdrop blooms in from black, as it does behind a
   take the moment you press Stop (moment.js); the picture itself never moves
   or fades, so it paints at once (LCP). Reduce Motion: no bloom. */
.take .tk-hero-shot{max-width:1240px;margin-top:clamp(44px,5.4vw,72px);padding:clamp(14px,4.2vw,72px)}
.take .tk-hero-shot::before{content:"";position:absolute;inset:0;z-index:-1;background:#000;opacity:0;pointer-events:none}
.take .tk-hero-shot .cut{border-radius:0;filter:drop-shadow(0 26px 44px rgba(20,8,40,.5)) drop-shadow(0 5px 12px rgba(20,8,40,.28))}
@media(prefers-reduced-motion:no-preference){
  .take .tk-hero-shot::before{animation:tk-bloom 1.1s cubic-bezier(.22,.8,.3,1) .15s both}
}
@keyframes tk-bloom{from{opacity:1}to{opacity:0}}

/* The one job, in the app's own four lines (the first run's Hello screen,
   FirstRunView.hello): each with its tile in the first run's colour. */
.take .tk-jobs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);max-width:1120px;margin:clamp(48px,6vw,80px) auto 0;padding:0;text-align:left}
.take .tk-jobs li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
.take .tk-jobs p b{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.016em;color:var(--onb1)}
.take .tk-jobs p span{display:block;margin-top:4px;font-size:15.5px;line-height:1.4;color:var(--onb2)}
@media(max-width:980px){.take .tk-jobs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}}
@media(max-width:560px){.take .tk-jobs{grid-template-columns:minmax(0,1fr);gap:20px}}

/* A tile: the app's rounded square with a white glyph (Look panel rows,
   first-run jobs). */
.take .tk-tile{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--c,var(--tk-blue));color:#fff;flex:0 0 auto;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.25)}
.take .tk-tile svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.take .tk-tile.sm{width:26px;height:26px;border-radius:7px}
.take .tk-tile.sm svg{width:15px;height:15px}

/* ---------------------------------------------------------- staged moment */
/* Straight on from the hero's four jobs, so less black between them. */
.take #staging{padding-top:clamp(64px,8vw,112px)}
/* The line the staged moment shows under a take (AutoEdit.summary, the
   prototype's .m-pill): for this take, word for word. It hangs off the
   card's bottom edge. */
.take .tk-pill{position:relative;z-index:2;display:flex;justify-content:center;margin:-22px 16px 0}
.take .tk-pill p{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:11px 18px 11px 12px;border-radius:999px;background:rgba(36,36,40,.92);
  box-shadow:0 0 0 .5px rgba(255,255,255,.16),0 14px 36px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  font-size:15px;line-height:1.35;font-weight:500;color:rgba(235,235,245,.62);letter-spacing:-.01em}
.take .tk-pill b{color:#F5F5F7;font-weight:700}
.take .tk-pill i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tk-green);flex:0 0 auto}
.take .tk-pill i svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.take .tk-pill p{border-radius:18px;font-size:14px;align-items:flex-start}}

/* ------------------------------------------------------------------ strip */
/* What each colour on the strip is, in the strip's own colours
   (Take4Style.Palette: the trim frame, the zoom, skip, blur and voiceover
   pills). */
.take .tk-keys{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:980px;margin:28px auto 0;padding:0}
.take .tk-keys li{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--bg);font-size:15px;line-height:1.3;color:var(--t2)}
.take .tk-keys i{flex:0 0 auto;width:26px;height:12px;border-radius:4px;background:var(--k)}
.take .tk-keys i.trim{width:12px;border-radius:3px}
/* The real cut, smaller, beside its words. */
.take .tk-cut{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1120px;margin:clamp(56px,7vw,96px) auto 0}
.take .tk-cut .pane-shot{margin:0;max-width:none;padding:clamp(14px,2.6vw,32px)}
.take .tk-cut h3{font:600 clamp(24px,2.6vw,34px)/1.12 var(--display);letter-spacing:-.022em;color:var(--t1)}
.take .tk-cut p{margin-top:12px;font-size:clamp(17px,1.5vw,19px);line-height:1.4;color:var(--t3)}
@media(max-width:860px){.take .tk-cut{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------- Look panel */
.take .tk-look{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:1120px;margin:0 auto}
.take .tk-look .pane-shot{margin:0;max-width:440px;justify-self:end;width:100%;padding:clamp(22px,4vw,48px) clamp(34px,6vw,72px)}
.take .tk-look .pane-shot .cut{border-radius:clamp(12px,1.6vw,20px)}
.take .tk-look h2{text-align:left}
.take .tk-look .lede{margin-top:14px;max-width:24em}
.take .tk-facts{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin:40px 0 0;padding:0}
.take .tk-facts > li > b{display:block;font:600 19px/1.25 var(--display);letter-spacing:-.016em;color:var(--onb1)}
.take .tk-facts > li > span{display:block;margin-top:5px;font-size:16px;line-height:1.45;color:var(--onb2);max-width:30em}
.take .tk-switches{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.take .tk-switches li{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.09)}
.take .tk-switches b{font-size:14.5px;font-weight:600;color:var(--onb1);letter-spacing:-.01em}
.take .tk-shapes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:4px;border-radius:12px;background:rgba(255,255,255,.06);width:fit-content;max-width:100%}
.take .tk-shapes span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--onb1)}
.take .tk-shapes span:first-child{background:rgba(255,255,255,.15)}
.take .tk-shapes svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media(max-width:860px){
  .take .tk-look{grid-template-columns:minmax(0,1fr)}
  .take .tk-look .pane-shot{justify-self:center;order:2}
  .take .tk-look h2,.take .tk-look .lede{text-align:center;margin-inline:auto}
  .take .tk-facts{max-width:520px;margin-inline:auto}
}

/* ------------------------------------------------------------------ share */
.take .tk-share .split-copy .lede{max-width:22em}
.take .tk-share .pane-shot{margin:0;width:100%}
.take .tk-sizes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0}
.take .tk-sizes li{padding:7px 13px;border-radius:9px;background:var(--bg);font-size:14.5px;font-weight:600;color:var(--t1)}
.take .tk-sizes li small{font-weight:500;color:var(--t3);margin-left:4px;font-size:13px}

/* ------------------------------------------------------------ small screens */
/* A 16px gutter on a phone, the brief's rule for this page. */
@media(max-width:560px){
  .take main .wrap{padding-left:16px;padding-right:16px}
  /* The review row bleeds to the window's edges: as far as the gutter, no further. */
  body.take.product-page .reviews .revs,body.take.product-page .reviews .revs:has(> .rev-card:only-child){margin:0 -16px;padding:4px 16px 8px}
  .take .tk-hero-shot{border-radius:16px}
  .take .tk-keys li{font-size:14px}
  .take .tk-look .pane-shot{max-width:320px}
}