/* ===========================================================================
   crestnotch.app, the product pages' kit (2026-09-28 redesign, stage 2).

   What the home page and /crest share, and /take and /minutes will: the drawn
   screens the app's renders sit on, the folds, the restyled plan cards, the
   review wall, and the type and grounds of the Apple-shaped pages Zack chose.
   suite.css still draws the header, the footer, the buttons, the team card and
   the review form. A page opts in with <body class="product-page"> and keeps
   what only it has in its own file (home.css: the scroll scenes and the
   carousel). page.js is this file's partner.

   Screens are placed in points of the 1512 x 982 screen the Crest renders were
   drawn on (a 14-inch MacBook Pro): --pt is one point in pixels, so the notch
   and every panel keep their true proportions at any size.
   =========================================================================== */

/* ------------------------------------------------------------------ ground */
/* The rubber band above a black first screen (Safari's elastic scroll) shows
   the canvas, which is paper on every other page. */
html:has(> body.product-page){background:var(--black)}
body.product-page{background:var(--black);color:var(--onb1)}
/* Each section sets its own padding; the shell's section padding is for the
   other pages. */
.product-page main > section{padding:0}
.product-page [id]{scroll-margin-top:var(--hdr)}
.product-page main p{max-width:none}
.product-page .anchor{display:block;height:0}

/* One idea per screen: a headline, and at most one quiet line under it. */
.product-page h1{font-size:clamp(44px,7.2vw,96px);line-height:1.03;letter-spacing:-.028em;max-width:none}
.product-page h2{font-size:clamp(36px,5.4vw,72px);line-height:1.05;letter-spacing:-.026em}
.product-page .lede{font-size:clamp(19px,1.9vw,26px);line-height:1.25;letter-spacing:-.014em;font-weight:500;max-width:none;text-wrap:balance}
.product-page .cap{font-family:var(--display);font-size:clamp(26px,3.4vw,48px);line-height:1.1;letter-spacing:-.024em;font-weight:600;text-wrap:balance}
.product-page [data-theme="dark"]{color:var(--onb1)}
.product-page [data-theme="dark"] :is(h1,h2,h3){color:var(--onb1)}
.product-page [data-theme="dark"] .lede{color:var(--onb2)}
.product-page [data-theme="dark"] .dim{color:var(--onb3)}
.product-page [data-theme="light"]{color:var(--t1)}
.product-page [data-theme="light"] .lede,.product-page [data-theme="light"] .dim{color:var(--t3)}

/* A quiet text link with a chevron: amber on black, the darker amber on paper. */
.product-page .more{font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--amber)}
.product-page .more::after{content:" \203A";font-size:1.15em;line-height:0;position:relative;top:.04em}
.product-page .more:hover{text-decoration:underline;text-underline-offset:3px}
.product-page [data-theme="light"] .more{color:var(--link)}
.product-page .ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;margin-top:26px}

/* ---------------------------------------------------------------- screens */
.product-page .screen{position:relative;overflow:hidden}
.product-page .screen img,.product-page .card-screen img{max-width:none}
.product-page .wall{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(1512 * var(--pt));height:auto;aspect-ratio:1512 / 982}
/* The drawn Mac's notch. Not .notch: suite.js reads the first .notch on a page as
   the site notch its header links must clear (navTuck), and would hide them. */
.product-page .mac-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;
  width:calc(220 * var(--pt));height:calc(38 * var(--pt));background:#000;
  border-radius:0 0 calc(11 * var(--pt)) calc(11 * var(--pt))
}
.product-page .mac-notch::after{ /* the camera */
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:calc(7.5 * var(--pt));height:calc(7.5 * var(--pt));border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#3a4a61 0 14%,#111822 42%,#06080b 72%);
  box-shadow:0 0 0 calc(1.4 * var(--pt)) #0c0c0d
}
/* Crest's black shape: the panel's body under a picture, or between two while it morphs. */
.product-page .shape{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  width:calc(var(--bw,739) * var(--pt));height:calc(var(--bh,274.5) * var(--pt));
  background:#000;border:max(1px,calc(.7 * var(--pt))) solid rgba(255,255,255,.11);border-top:0;
  border-radius:0 0 calc(var(--br,18) * var(--pt)) calc(var(--br,18) * var(--pt));
  /* Crest's panel casts a shadow; the bare notch does not, so it fades in with the opening. */
  box-shadow:0 calc(12 * var(--pt)) calc(34 * var(--pt)) rgba(0,0,0,calc(.38 * var(--bs,1)))
}
.product-page .layer{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;
  width:calc(var(--w) * var(--pt));height:auto;opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none
}

/* The top of a MacBook's screen, lid and all: a slice, fading out at the bottom.
   page.js sets --pt (86% of the window, at most data-pt-max px a point) and
   .bleed when the lid would be wider than the window. The screen's height is
   --sh points, so a picture that needs more room can ask for it. */
.product-page .slice{
  --pt:min(calc(86vw / 760),1.5px);
  position:relative;width:min(100%,calc(1540 * var(--pt)));margin-inline:auto;
  padding:calc(14 * var(--pt)) calc(14 * var(--pt)) 0;background:#050505;
  border:calc(2.6 * var(--pt)) solid #3f4044;border-bottom:0;
  border-radius:calc(26 * var(--pt)) calc(26 * var(--pt)) 0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--fade,72%),transparent);mask-image:linear-gradient(180deg,#000 var(--fade,72%),transparent)
}
/* Wider than the window: the lid's corners are off screen, so none are drawn. */
.product-page .slice.bleed{padding-left:0;padding-right:0;border-left:0;border-right:0;border-radius:0}
.product-page .slice .screen{height:calc(var(--sh,380) * var(--pt));border-radius:calc(10 * var(--pt)) calc(10 * var(--pt)) 0 0;background:#1c2e7a}
.product-page .slice.bleed .screen{border-radius:0}
.product-page .slice .wall,.product-page .card-screen .wall{width:auto;min-width:calc(1512 * var(--pt));height:100%;object-fit:cover;object-position:50% 0}
/* A card with a patch of wallpaper and a picture hanging from its notch. */
.product-page .card-screen{position:relative;overflow:hidden;background:#1c2e7a;border-radius:28px}
.product-page .card-screen .layer{opacity:1}

/* ----------------------------------------------------------------- reviews */
.product-page .reviews{background:var(--bg2);padding:clamp(84px,10vw,140px) 0}
.product-page .reviews h2,.product-page .reviews .lede{text-align:center}
.product-page .reviews .lede{margin-top:14px}
.product-page .reviews .rev-sum{text-align:center;margin:28px 0 22px}
/* However many cards the server or reviews.js draws (up to twelve), they sit in
   three columns, each card its own height, so a one-line review beside a
   ten-line one leaves no hole. page.js packs them (.packed: a grid of 1px rows,
   each card spanning its own height, shortest column first) because CSS
   columns balance well in Chrome and badly in Safari (measured 2026-09-28);
   the CSS columns below are what shows without it. --masonry tells page.js
   whether this width wants the columns at all. A lone card (the empty wall)
   sits in the middle. */
.product-page .reviews .revs{--masonry:on;display:block;columns:3 280px;column-gap:16px;margin-top:36px}
.product-page .reviews .rev-sum:not([hidden]) + .revs{margin-top:0}
.product-page .reviews .revs > .rev-card{break-inside:avoid;margin:0 0 16px;background:var(--bg)}
.product-page .reviews .revs:has(> .rev-card:only-child){columns:auto;max-width:520px;margin-inline:auto}
/* gap:0 16px, not just column-gap: suite.css gives .revs a 16px row gap, which
   between 1px rows would multiply every card's height by seventeen. */
.product-page .reviews .revs.packed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1px;grid-auto-flow:row dense;gap:0 16px;align-items:start;columns:auto}
.product-page .reviews .revs.packed > .rev-card{margin:0}
.product-page .reviews #revCta{justify-content:center;display:flex}
/* Phones: one card and the edge of the next, swiped sideways. */
@media(max-width:900px){
  .product-page .reviews .revs{--masonry:off;display:flex;columns:auto;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -28px;padding:4px 28px 8px}
  .product-page .reviews .revs:has(> .rev-card:only-child){max-width:none;margin:0 -28px}
  .product-page .reviews .revs::-webkit-scrollbar{display:none}
  .product-page .reviews .revs > .rev-card{flex:0 0 min(82%,420px);margin:0;scroll-snap-align:center}
  .product-page .reviews .revs > .rev-card:only-child{flex-basis:100%}
}
@media(max-width:720px){.product-page .reviews .revs,.product-page .reviews .revs:has(> .rev-card:only-child){margin:0 -20px;padding:4px 20px 8px}}

/* ----------------------------------------------------------------- pricing */
.product-page .pricing{background:var(--bg);padding:clamp(96px,12vw,160px) 0 clamp(56px,7vw,96px)}
.product-page .pricing h2,.product-page .pricing .lede{text-align:center}
.product-page .pricing .lede{margin-top:14px}
.product-page .plans.plans-3{margin-top:clamp(40px,5vw,64px);gap:20px;align-items:stretch}
@media(max-width:980px){.product-page .plans.plans-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.product-page .plans.plans-3{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.product-page .plans .plan{background:var(--bg2);min-height:0;gap:0;padding:clamp(28px,3vw,40px);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.product-page .plans .plan.pick{box-shadow:0 0 0 2px var(--amber)}
/* Every card opens with its tag, so the names and prices line up across the
   row. A sale can hide the everything tag (suite.js, when the sale closes the
   gap it states); it keeps its room so the row stays level. */
.product-page .plans .plan .tag{position:static;align-self:flex-start;margin-bottom:14px}
.product-page .plans .plan .tag[hidden]{display:block!important;visibility:hidden}
.product-page .plans .plan h3{font-size:21px;letter-spacing:-.016em}
.product-page .plans .plan .amt{margin-top:10px;font-size:clamp(40px,4vw,52px)}
.product-page .plans .plan .sale-line{margin-top:12px!important}
.product-page .plans .plan ul{list-style:none;padding:0;margin:24px 0 30px;flex:1}
.product-page .plans .plan li{padding:9px 0;border-top:1px solid #ececef;font-size:16px;line-height:1.35;color:var(--t2)}
.product-page .plans .plan li:first-child{border-top:0}
/* markOwned() in suite.js writes "Yours ✓" into the card's note line for an
   owner; for everybody else the line is empty and takes no room. */
.product-page .plans .plan .tryline{margin-top:12px}
.product-page .plans .plan .tryline:empty{display:none}
/* BUY ONCE OR SUBSCRIBE (S4): the subscribe card's second price and its two buttons, the
   terms under every paid button, and the trust line and owners line under the cards. */
.product-page .plans .plan .amt-alt{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--t2)}
.product-page .plans .plan .sub-btns{display:flex;flex-direction:column;gap:10px}
.product-page .plans .plan .terms{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--t3)}
.product-page .plans .plan .sub-status{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--t2)}
.product-page .plans .plan .sub-status[hidden]{display:none}
.product-page .trust-line{max-width:760px;margin:clamp(24px,3vw,32px) auto 0;text-align:center;font-size:14.5px;line-height:1.6;color:var(--t2)}
.product-page .owners-line{max-width:760px;margin:8px auto 0;text-align:center;font-size:13.5px;line-height:1.6;color:var(--t3)}
.product-page .plans .plan .owned{margin-top:0}
.product-page .plan.team-plan{margin-top:20px;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.product-page .pay-note{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:28px;text-align:center}

/* ----------------------------------------------------------------- details */
/* Folded on purpose: the facts people and search engines need, out of sight
   until somebody asks for them. */
.product-page .details{background:var(--bg);padding:clamp(40px,6vw,80px) 0 clamp(96px,12vw,150px)}
.product-page .details h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:18px}
.product-page .fold{border-top:1px solid var(--hair)}
.product-page .fold:last-of-type{border-bottom:1px solid var(--hair)}
.product-page .fold > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 2px;font:600 clamp(19px,1.8vw,24px)/1.25 var(--display);letter-spacing:-.018em;color:var(--t1)
}
.product-page .fold > summary::-webkit-details-marker{display:none}
.product-page .fold > summary::after{content:"";flex:0 0 auto;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat,linear-gradient(currentColor,currentColor) center / 2px 100% no-repeat;transition:transform .3s ease}
.product-page .fold[open] > summary::after{transform:rotate(45deg)}
.product-page .fold-body{padding:0 2px 34px;font-size:16px;line-height:1.55;color:var(--t2)}
.product-page .fold-body > p{max-width:62ch}
.product-page .fold-body a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
.product-page .fold-body a:hover{color:var(--t1)}
.product-page .qa dt{font-weight:600;color:var(--t1);margin-top:22px}
.product-page .qa dt:first-child{margin-top:0}
.product-page .qa dd{margin:6px 0 0;max-width:60em}
.product-page .specs{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px 24px;margin:0}
.product-page .specs dt{font-weight:600;color:var(--t1)}
.product-page .specs dd{margin:0}
.product-page .table-scroll{overflow-x:auto;margin:6px -2px 0}
.product-page .compare{width:100%;min-width:720px;border-collapse:collapse;font-size:15px;line-height:1.4}
.product-page .compare th,.product-page .compare td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid #e3e3e8}
.product-page .compare thead th{border-top:0;font-size:14px;color:var(--t3);font-weight:600}
.product-page .compare tbody th{font-weight:600;color:var(--t1);width:17%}
.product-page .compare td:first-of-type{color:var(--t1);font-weight:600}
.product-page .compare-links{margin-top:16px;font-size:15px}

/* ------------------------------------------------------------------ panes */
/* A product page's ordinary section: one idea, a centred headline with at most
   one line under it, on paper, white or black. */
.product-page .pane{padding:clamp(96px,12vw,160px) 0}
.product-page .pane.paper{background:var(--bg)}
.product-page .pane.white{background:var(--bg2)}
.product-page .pane.black{background:var(--black)}
.product-page .pane-head h2,.product-page .pane-head .lede{text-align:center}
.product-page .pane-head .lede{margin-top:14px}
.product-page .pane .more-line{text-align:center;margin-top:22px}

/* ------------------------------------------------------------- a page's hero */
/* Headline, one line, both doors, then the product under its notch. */
.product-page .page-hero{background:var(--black);padding:calc(var(--hdr) + clamp(40px,7vh,88px)) 0 clamp(48px,7vw,96px);text-align:center}
.product-page .page-hero .name{font:600 clamp(19px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.016em;margin-bottom:10px;color:var(--onb1)}
.product-page .page-hero .lede{margin-top:16px}
.product-page .page-hero .slice{margin-top:clamp(40px,5vw,64px)}
@media(max-width:560px){.product-page .page-hero .lede br{display:none}}
/* Shown only while a sale runs (suite.js fills and unhides the span). */
.product-page .hero-sale{margin-top:14px;font-size:14px;font-weight:500;color:var(--amber)}
.product-page .hero-sale:has(> [hidden]){display:none}
/* brew_line.py */
[data-theme="dark"] [data-copy]:focus-visible{outline-color:var(--onb1)}

/* ------------------------------------------------------------------- tabs */
/* A row of choices under a screen: each lights its picture (data-tab-panel)
   and puts its line under the row. The screen may grow to fit (data-sh).
   page.js wires them; without it the first picture and line simply stay. */
.product-page .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px;padding:0 20px}
.product-page .tabs button{min-height:40px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--onb2);font:500 15px/1 var(--text);letter-spacing:-.01em;transition:background-color .2s ease,color .2s ease}
.product-page .tabs button:hover{color:var(--onb1)}
.product-page .tabs button[aria-selected="true"]{background:var(--onb1);color:#000}
.product-page .tab-cap{text-align:center;margin-top:16px;min-height:2.6em;padding:0 20px;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.012em;color:var(--onb2)}
.product-page [data-tab-panel]{transition:opacity .35s ease}
.product-page [data-tab-panel].on{opacity:1}
.product-page .slice[data-slice] .screen{transition:height .45s cubic-bezier(.2,.8,.2,1)}
html:not(.page-js) .product-page .tabs{display:none}

/* ----------------------------------------------------------------- tiles */
/* Things an app does, one tile each: its glyph, its name, one line. The last
   row sits in the middle however many there are. */
.product-page .tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(40px,5vw,64px)}
.product-page .tile{flex:0 0 calc((100% - 56px) / 5);min-width:0;position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 20px 20px;border-radius:22px;background:var(--bg2)}
.product-page .tile svg{width:26px;height:26px;margin-bottom:10px;fill:none;stroke:var(--t1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.product-page .tile b{font-size:17px;font-weight:600;letter-spacing:-.014em;color:var(--t1)}
.product-page .tile span{font-size:15px;line-height:1.35;color:var(--t3)}
.product-page .tile .free{position:absolute;top:18px;right:16px;font:600 11px/1 var(--text);letter-spacing:.02em;color:#7A4300;background:#FFF3DC;padding:5px 8px;border-radius:999px}
@media(max-width:1060px){.product-page .tile{flex-basis:calc((100% - 42px) / 4)}}
@media(max-width:820px){.product-page .tile{flex-basis:calc((100% - 28px) / 3)}}
@media(max-width:560px){.product-page .tile{flex-basis:calc((100% - 14px) / 2)}.product-page .tile span{font-size:14px}}

/* ----------------------------------------------------------------- split */
/* Words on one side, a picture on the other; stacked on a phone. */
.product-page .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:center}
.product-page .split-copy{display:grid;gap:18px;justify-items:start}
.product-page .split-copy .lede{max-width:26em}
@media(max-width:860px){.product-page .split{grid-template-columns:1fr}}
/* A card screen that sizes its own points from its width (container units):
   the picture spans 92% of the card. */
.product-page .card-screen.fit{container-type:inline-size;--pt:calc(100cqw * .92 / 760);aspect-ratio:16 / 11}

/* ---------------------------------------------------------- window layouts */
.product-page .layouts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.product-page .lay{display:grid;gap:10px;justify-items:center;margin:0}
.product-page .lay svg{width:100%;height:auto}
.product-page .lay figcaption{font-size:14px;color:var(--t3)}
@media(max-width:860px){.product-page .layouts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.product-page .layouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}

/* ------------------------------------------------------------------ facts */
.product-page .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px;margin-top:clamp(40px,5vw,72px)}
.product-page .fact b{display:block;font:600 clamp(22px,2.2vw,28px)/1.15 var(--display);letter-spacing:-.02em}
.product-page .fact span{display:block;margin-top:10px;max-width:20em;font-size:17px;line-height:1.4;color:var(--onb2)}
.product-page .fact-line{margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:clamp(19px,1.7vw,23px);font-weight:500;color:var(--onb2)}
.product-page .fact-line b{color:var(--onb1);font-weight:600}
@media(max-width:860px){.product-page .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------ small screens */
@media(max-width:760px){
  .product-page .specs{grid-template-columns:1fr;gap:4px}
  .product-page .specs dd{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .product-page *,.product-page *::before,.product-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---- stage 3, shared by the app pages (2026-09-29 review) ----------------
   What /take and /minutes both draw, written once (each was in its own block
   until the review): the whole window on the drawn Mac in the hero (the slice
   spans the screen's 1540 points, data-span, which page.js reads), a cut of
   a window on a patch of the wallpaper (.pane-shot, the way /crest shows a
   module on its card), the requirement under a Minutes door, the facts and
   their line on paper, two plan cards, and the pricing's "Just want Crest
   Pro?" line. Each page keeps only what is its own, below. */
.product-page .slice[data-span="1540"]{--pt:min(calc(86vw / 1540),1px)}
.product-page .layer.win{top:calc(var(--y,46) * var(--pt));opacity:1;border-radius:calc(14 * var(--pt));
  box-shadow:0 0 0 max(1px,calc(.8 * var(--pt))) rgba(255,255,255,.14),0 calc(28 * var(--pt)) calc(70 * var(--pt)) rgba(0,0,0,.5)}
.product-page .pane-shot{position:relative;overflow:hidden;max-width:1060px;margin:clamp(40px,5vw,64px) auto 0;padding:clamp(18px,4.5vw,56px);border-radius:clamp(20px,2.4vw,28px);background:#1c2e7a}
.product-page .pane-shot.tall{max-width:520px}
.product-page .pane-shot.slim{max-width:860px}
.product-page .pane-shot .wall{position:absolute;top:0;left:0;width:100%;height:100%;min-width:0;max-width:none;transform:none;aspect-ratio:auto;object-fit:cover;object-position:50% 0}
.product-page .pane-shot .cut{position:relative;display:block;width:100%;height:auto;border-radius:clamp(8px,1vw,12px);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.45)}
/* The requirement beside a Minutes door (contract 11 in
   Scripts/check_site_contracts.py): quiet, never hidden. */
.product-page .req{margin-top:14px;font-size:14px;line-height:1.45;color:var(--t3)}
.product-page [data-theme="dark"] .req{color:var(--onb3)}
/* The facts and their line on paper (the kit draws both for black). */
.product-page [data-theme="light"] .fact span{color:var(--t3)}
.product-page [data-theme="light"] .fact-line{border-top-color:var(--hair);color:var(--t3)}
.product-page [data-theme="light"] .fact-line b{color:var(--t1)}
/* Two cards: the trial, and everything (Take and Minutes are never sold alone). */
.product-page .plans.plans-2{margin:clamp(40px,5vw,64px) auto 0;gap:20px;align-items:stretch;max-width:860px}
@media(max-width:760px){.product-page .plans.plans-2{grid-template-columns:1fr;max-width:520px}}
.product-page .pricing-more{text-align:center;margin-top:26px}
/* A real space between the price and its small words ("$24.99 once"), so a screen
   reader says two words, not "$24.99once"; the space is the gap, so no margin.
   Found on /take (2026-09-29) and applied to every kit page's plan cards at merge;
   the team card keeps its own markup (Scripts/team_card.test.mjs holds it equal). */
.product-page .plans .plan .amt small{margin-left:0}
/* An empty wall is reviews.js's one card with its own button. Take and Minutes
   have no approved review yet (2026-09-29), so on their pages the "write a
   review" button under it would ask twice: it waits until there are reviews
   to sit under. / and /crest keep it (their walls are full; empty only with
   the reviews API down, and their tests hold the button there). */
.product-page:is(.take,.minutes) .reviews .revs:has(> .rev-empty) ~ #revCta{display:none}
/* A fold's paragraphs and lists with room between them (/teams, /products). */
.product-page:is(.teams,.products) .fold-body > * + *{margin-top:16px}

/* ---- stage 3: take (2026-09-29) -------------------------------------------
   /take shows Take's own windows, rendered by the app at 2880x1800 from staged
   demo content: the editor on the drawn Mac in the hero, then one cut per idea
   on a patch of the wallpaper (.pane-shot, above). The Export menu is a tall
   cut beside its words, in the split, where the card's top margin would push
   it off the words' middle. */
.product-page.take .split .pane-shot{margin-top:0}

/* ---- stage 3: minutes ---- */
/* /minutes on the kit (2026-09-29, redesign stage 3). Minutes is a window, not a
   panel: the hero puts the whole window on the drawn Mac and each section after
   it shows a cut of the same renders on a patch of the wallpaper (the shared
   rules above, since the review; /take draws the same). What is here is only
   /minutes' own, scoped to .product-page.minutes. */

/* The requirement beside every Minutes door, in the hero and on the cards. */
.product-page.minutes .page-hero .req{margin-top:18px;font-size:15px}
.product-page.minutes .plans .plan .req{margin-top:12px;font-size:13.5px;text-align:center}

/* Two cuts that trade places under a tab row: one box the size of the taller,
   grounded in the note's own colour (#1B1D1F in the render), each cut pinned to
   its top, so switching never moves the page. */
.product-page.minutes .cuts{position:relative;overflow:hidden;border-radius:clamp(8px,1vw,12px);background:#1b1d1f;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.45)}
.product-page.minutes .cuts .cut{position:absolute;top:0;left:0;border-radius:0;box-shadow:none;opacity:0}
.product-page.minutes .cuts .cut.on{opacity:1}

/* The tab rows on paper (the kit draws them for black). */
.product-page.minutes [data-theme="light"] .tabs button{background:rgba(0,0,0,.06);color:var(--t2)}
.product-page.minutes [data-theme="light"] .tabs button:hover{color:var(--t1)}
.product-page.minutes [data-theme="light"] .tabs button[aria-selected="true"]{background:var(--t1);color:#fff}
.product-page.minutes [data-theme="light"] .tab-cap{color:var(--t3)}
/* A fold's opening paragraph, then its questions. */
.product-page.minutes .fold-body > p + .qa{margin-top:22px}

/* ---- stage 3: teams + join ---- */
/* /teams and /join on the kit (2026-09-29). Every rule is scoped to one of the
   two pages, so no other page sees it. */

/* /teams: the hero. The strip's screen is the wallpaper's sky drawn in CSS
   (tools/wallpaper.py: #1c2e7a lifting to #5b7fe6 at 54% of 982 points; a strip
   shows only the top sixth, and the picture is 44 KB), and the slice is sized
   here, not by page.js: a strip is 636 points, so it takes 92% of a phone. */
.product-page.teams .page-hero .hero-fine{margin-top:18px;font-size:15px;line-height:1.4;color:var(--onb3)}
.product-page.teams .page-hero .slice{--pt:min(calc(92vw / 636),1.5px)}
.product-page.teams .slice .screen.sky{background:linear-gradient(180deg,#1c2e7a 0,#213583 calc(98 * var(--pt)),#2f469a calc(196 * var(--pt)),#405cb7 calc(295 * var(--pt)),#4f70d2 calc(393 * var(--pt)),#5b7fe6 calc(540 * var(--pt)))}
/* every button on /teams is a 44px target (Scripts/business_layout.test.mjs) */
.product-page.teams .tabs button{min-height:44px}

/* the blocks under a headline */
.product-page.teams :is(.rules,.leave,.tiers,.shot-frame,.plan.team-plan){max-width:980px;margin:clamp(40px,5vw,64px) auto 0}
.product-page.teams :is(.rules,.leave){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.product-page.teams :is(.rulecard,.leave-col){background:var(--bg2);border-radius:28px;padding:clamp(28px,3.4vw,44px)}
.product-page.teams :is(.rule-kind,.leave-kind){display:inline-block;font:600 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:7px;border:1px solid var(--hair3);color:var(--t2)}
.product-page.teams .rulecard.never .rule-kind{color:var(--red);border-color:rgba(197,55,43,.42)}
.product-page.teams :is(.rulecard.always .rule-kind,.leave-col.stays .leave-kind){color:var(--green);border-color:rgba(29,122,62,.4)}
@media(max-width:760px){.product-page.teams :is(.rules,.leave){grid-template-columns:1fr}}

/* never allow, always allow: the rules as the account page lists them */
.product-page.teams .rule-rows{list-style:none;padding:0;margin:20px 0 0}
.product-page.teams .rule-rows li{padding:14px 0;border-top:1px solid var(--hair2);font:500 clamp(18px,1.7vw,22px)/1.4 var(--text);letter-spacing:-.014em;color:var(--t1)}
.product-page.teams .rule-rows li:first-child{border-top:0}
.product-page.teams .rule-rows code{font:500 .86em/1 var(--mono);letter-spacing:0;white-space:nowrap;background:var(--inset);border-radius:7px;padding:4px 8px}
.product-page.teams .rule-say{margin-top:14px;font-size:16px;line-height:1.45;color:var(--t3)}
.product-page.teams .pane .more-line{font-size:17px;color:var(--t3)}
.product-page.teams .pane .more-line a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
.product-page.teams .fact-line a:not(.btn){color:var(--onb1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}

/* the account page's own pictures (Scripts/render_teams_stills.py) */
.product-page.teams .shot-frame img{width:100%;height:auto;border-radius:22px;background:var(--bg);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -34px rgba(0,0,0,.28)}
.product-page.teams .shot-frame figcaption{margin:16px auto 0;max-width:46em;text-align:center;font-size:14px;line-height:1.5;color:var(--t3)}

/* one seat: the three apps on black */
.product-page.teams .seat-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px)}
.product-page.teams .seat-app{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#111113;border-radius:28px;padding:clamp(26px,3vw,38px)}
.product-page.teams .seat-app img{width:56px;height:56px;margin-bottom:8px}
.product-page.teams .seat-app h3{font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.02em}
.product-page.teams .seat-app p{flex:1;font-size:16px;line-height:1.45;color:var(--onb2)}
@media(max-width:860px){.product-page.teams .seat-apps{grid-template-columns:1fr}}

/* the price: the rule's three steps over the team card */
.product-page.teams .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:center}
.product-page.teams .tier b{display:block;font:600 clamp(44px,5.4vw,72px)/1 var(--display);letter-spacing:-.035em;color:var(--t1);font-variant-numeric:tabular-nums}
.product-page.teams .tier > span{display:block;margin-top:10px;font-size:clamp(16px,1.4vw,19px);font-weight:500;line-height:1.35;color:var(--t3)}
@media(max-width:560px){.product-page.teams .tiers{gap:10px}.product-page.teams .tier b{font-size:clamp(34px,10vw,44px)}.product-page.teams .tier > span{font-size:14px}}

/* what leaves the Mac (the seat steps that stood over the Team view are the
   "Seats, in full" fold since the 2026-09-29 review) */
.product-page.teams .leave dd{display:block;margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--t3)}
.product-page.teams .leave dl{margin:18px 0 0}
.product-page.teams .leave dt{margin-top:18px;font:600 17px/1.3 var(--text);letter-spacing:-.012em;color:var(--t1)}
.product-page.teams .leave dt:first-child{margin-top:0}
.product-page.teams .contact-fine{margin-top:24px;text-align:center;font-size:14px;line-height:1.5;color:var(--onb3)}

/* the details: code, the price table, a button in a fold */
.product-page.teams .fold-body code{font:500 .9em/1.4 var(--mono);color:var(--t1);background:var(--inset);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.product-page.teams .team-prices{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.4}
.product-page.teams .team-prices :is(th,td){text-align:left;vertical-align:top;padding:11px 16px 11px 0;border-top:1px solid #e3e3e8}
.product-page.teams .team-prices thead th{border-top:0;font-size:14px;font-weight:600;color:var(--t3)}
.product-page.teams .team-prices :is(td:first-child,.t-amt){color:var(--t1);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.product-page.teams .team-prices tr.t-same td{color:var(--t3)}
.product-page.teams .fold-body a.btn{color:var(--t1);text-decoration:none}
.product-page.teams .fold-body a.btn:hover{color:#fff}

/* /join: the invite on paper. join.html's own script paints every state into
   #joinBody with these classes (j-*); only the look is new. */
html:has(> body.product-page.join){background:var(--bg)}
body.product-page.join{background:var(--bg);color:var(--t2)}
.product-page.join .join-pane{background:var(--bg);padding:calc(var(--hdr) + clamp(40px,9vh,104px)) 0 clamp(72px,10vw,128px)}
.product-page.join .jcard{max-width:560px;margin:0 auto;background:var(--bg2);border-radius:28px;padding:clamp(28px,4vw,44px);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 30px 60px -44px rgba(0,0,0,.2)}
.product-page.join .jcard .eyebrow{display:block;font-size:15px;color:var(--t3)}
.product-page.join .jcard h1{margin-top:8px;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.024em;overflow-wrap:anywhere}
.product-page.join .jcard p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--t2)}
.product-page.join .jcard :is(p b,.j-steps li b){color:var(--t1);font-weight:600;overflow-wrap:anywhere}
.product-page.join .j-facts{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hair2)}
.product-page.join .j-facts li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair2);font-size:15px;line-height:1.45}
.product-page.join .j-facts li b{flex:none;width:108px;font-size:14px;font-weight:600;color:var(--t3)}
.product-page.join .j-facts li span{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--t1)}
.product-page.join .j-act{margin-top:24px}
.product-page.join .j-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.product-page.join .j-row .btn{flex:1 1 180px}
.product-page.join .j-quiet{min-height:44px;padding:0 2px;font-size:14px;color:var(--t2)}
.product-page.join :is(.j-quiet,.j-fine a,.jcard p a,.j-steps li > a){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
.product-page.join :is(.j-fine a,.jcard p a,.j-steps li > a){color:var(--link)}
.product-page.join .j-quiet:hover{color:var(--t1)}
.product-page.join .j-msg{margin-top:16px;padding:12px 14px;border-radius:14px;font-size:15px;line-height:1.5}
.product-page.join .j-msg.bad{color:var(--red);background:rgba(197,55,43,.06);border:1px solid rgba(197,55,43,.24)}
.product-page.join .j-msg.info{color:var(--t1);background:var(--fill);border:1px solid var(--hair2)}
.product-page.join .j-msg.ok{color:var(--green);background:rgba(29,122,62,.07);border:1px solid rgba(29,122,62,.26)}
.product-page.join .j-steps{list-style:none;counter-reset:s;display:grid;gap:10px;margin:24px 0 0;padding:0}
.product-page.join .j-steps li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;border-radius:18px;background:var(--bg);font-size:15px;line-height:1.5;color:var(--t2)}
.product-page.join .j-steps li::before{content:counter(s);position:absolute;left:16px;top:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--t1);color:#fff;font:600 14px/1 var(--text)}
.product-page.join .j-dl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.product-page.join .j-dl a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--t1);border-radius:999px;color:var(--t1);font-size:14.5px;font-weight:500}
.product-page.join .j-dl a:hover{background:var(--t1);color:#fff}
.product-page.join .jcard p.j-fine{margin-top:16px;font-size:13px;color:var(--t3)}
.product-page.join .j-spin{width:22px;height:22px;margin:8px auto 14px;border:2px solid var(--hair3);border-top-color:var(--amber);border-radius:50%;animation:jspin .8s linear infinite}
@keyframes jspin{to{transform:rotate(360deg)}}
.product-page.join .jcard p.j-loading{text-align:center;font-size:15px}
@media(max-width:560px){.product-page.join .jcard{padding:26px 20px;border-radius:24px}.product-page.join .j-facts li{flex-direction:column;gap:2px}.product-page.join .j-facts li b{width:auto}}
/* /join loads no suite.js, so its header never folds into the phone menu: on a
   phone it keeps the account link (its script says Sign in or Your account) and
   drops Pricing, which the Get Crest button beside it also opens, and on the
   narrowest phones the button too. Measured: "Your account" pushed the button
   past the edge from 390px down, and "Sign in" from 360px. */
@media(max-width:560px){.product-page.join .navlinks a.link[href="/#pricing"]{display:none}}
@media(max-width:340px){.product-page.join .navlinks .cta{display:none}}

/* ---- stage 3: products (2026-09-29) ------------------------------------ */
/* /products: the three apps by their icons, side by side row for row, each on
   a Mac screen of its own, then the plans and the folded details. */

/* The hero's lineup: each app's icon, name and one line, down to its screen. */
.product-page.products .lineup{list-style:none;display:flex;justify-content:center;gap:clamp(12px,4vw,56px);max-width:860px;margin:clamp(44px,6vh,72px) auto 0;padding:0}
.product-page.products .lineup li{flex:1 1 0;min-width:0}
.product-page.products .lineup a{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:10px 4px;border-radius:18px;color:var(--onb1)}
.product-page.products .lineup img{width:72px;height:72px;margin-bottom:10px}
.product-page.products .lineup b{font:600 clamp(19px,1.7vw,22px)/1.2 var(--display);letter-spacing:-.016em}
.product-page.products .lineup span{font-size:15px;line-height:1.35;color:var(--onb2);text-wrap:balance}
.product-page.products .lineup small{font-size:13px;line-height:1.35;color:var(--onb3)}
.product-page.products .lineup a:hover b{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){
  .product-page.products .lineup img{width:52px;height:52px;margin-bottom:6px}
  .product-page.products .lineup span{font-size:13.5px}
  .product-page.products .lineup small{font-size:12px}
}

/* Side by side: a white column per app, its rows lined up across the three
   (subgrid) however the words wrap. What each one runs on sits right under
   its doors. One column under another below 860px. */
.product-page.products .sbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;margin-top:clamp(40px,5vw,64px)}
.product-page.products .sbs-app{display:grid;grid-row:span 11;grid-template-rows:subgrid;row-gap:0;align-content:start;background:var(--bg2);border-radius:28px;padding:clamp(26px,2.6vw,36px);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.product-page.products .sbs-icon{width:56px;height:56px}
.product-page.products .sbs-app h3{margin-top:18px;font-size:clamp(24px,2.2vw,28px);letter-spacing:-.02em}
.product-page.products .sbs-what{margin-top:4px;font-size:17px;line-height:1.35;color:var(--t2)}
.product-page.products .sbs-price{margin-top:14px;font-size:15px;line-height:1.4;color:var(--t3)}
.product-page.products .sbs-doors{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:10px 22px;margin-top:22px}
.product-page.products .sbs-needs{margin-top:14px;font-size:15px;line-height:1.4;font-weight:600;color:var(--t1)}
.product-page.products .sbs-rows{display:contents}
.product-page.products .sbs-rows > div{padding:13px 0;border-top:1px solid #ececef}
.product-page.products .sbs-rows > div:first-child{margin-top:20px}
.product-page.products .sbs-rows dt{font-size:13px;line-height:1.3;color:var(--t3)}
.product-page.products .sbs-rows dd{margin:3px 0 0;font-size:16px;line-height:1.35;color:var(--t1)}
@media(max-width:860px){
  .product-page.products .sbs{grid-template-columns:1fr;gap:16px;max-width:520px;margin-inline:auto}
  .product-page.products .sbs-app{display:block;grid-row:auto}
}
/* One column: each row's label and value on one line. */
@media(max-width:560px){
  .product-page.products .sbs-icon{width:48px;height:48px}
  .product-page.products .sbs-app h3{margin-top:14px}
  .product-page.products .sbs-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0}
  .product-page.products .sbs-rows dd{margin:0;text-align:right}
}

/* An app's section: its icon and name over the headline, its doors, and for
   Minutes the Mac it needs, right under them. */
.product-page.products .app-name{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;font:600 clamp(19px,1.7vw,24px)/1.2 var(--display);letter-spacing:-.016em}
.product-page.products .app-name img{width:40px;height:40px}
.product-page.products [data-theme="dark"] .app-name{color:var(--onb1)}
.product-page.products [data-theme="light"] .app-name{color:var(--t1)}
.product-page.products .app .req{text-align:center}

/* A Mac screen of the app's own (.desk): the wallpaper, the notch and the
   app's render, in points of the 1512 x 982 screen the renders were drawn on.
   --span is how many points the desk shows across (a window's 1440 fits the
   whole 1512; Crest 6's page, 546 wide, is shown closer, 800, and closer
   still on a phone, 600), --sh how many down. The
   points come from the desk's own width (container units), so it needs no
   script and never overflows. */
.product-page.products .desk{--pt:calc(100cqw / var(--span));container-type:inline-size;position:relative;overflow:hidden;width:100%;max-width:1124px;margin:clamp(40px,5vw,64px) auto 0;aspect-ratio:var(--span) / var(--sh);border-radius:clamp(14px,2vw,26px);background:#1c2e7a}
.product-page.products .desk.window{--span:1512;--sh:982}
.product-page.products .desk.panel{--span:800;--sh:345}
@media(max-width:560px){.product-page.products .desk.panel{--span:600;--sh:345}}
.product-page.products .desk img{max-width:none}
.product-page.products .desk .layer{opacity:1}
.product-page.products .desk .win{position:absolute;z-index:3;top:calc(46 * var(--pt));left:50%;transform:translateX(-50%);width:calc(1440 * var(--pt));height:auto;border-radius:calc(16 * var(--pt));box-shadow:0 calc(20 * var(--pt)) calc(60 * var(--pt)) rgba(0,0,0,.42),0 0 0 max(1px,calc(.8 * var(--pt))) rgba(255,255,255,.16)}

/* The details: each feature's name with its Free or Pro mark. */
.product-page.products .feats dt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px}
.product-page.products .badge{font:600 11px/1 var(--text);letter-spacing:.02em;padding:5px 8px;border-radius:999px;background:#EDEDF0;color:var(--t2)}
.product-page.products .badge.free{background:#FFF3DC;color:#7A4300}