/* Product pages, 18 October 2026.
   One layout for every Vloora product, loaded after site.css, editorial.css, type.css and refresh.css,
   the way case-study.css extends Writing. It uses the shared tokens (--ink, --cream, --mint, --line,
   --font, --display, --mono), the shared pill (.action), link (.utility-link) and list (.entries),
   and adds only the product layout: title area, the product stage, rule-separated rows that pair
   copy with a screen or a request, and the dark mono code block. Structure is documented in DESIGN.md. */

/* Title area: Pangram title, Medium summary, then a rule with the status in mono and the actions. */
.product-head{background:var(--cream);padding:clamp(80px,9vw,150px) 0 clamp(56px,6vw,96px)}
.product-head h1{font:600 clamp(75px,10vw,155px)/.95 var(--display);letter-spacing:-.055em;margin:0 0 38px}
.product-summary{font:500 clamp(21px,2.2vw,32px)/1.36 var(--font);letter-spacing:-.02em;max-width:36ch;margin:0 0 clamp(48px,6vw,88px)}
.product-head-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;border-top:1px solid var(--line);padding-top:24px}
.product-status{font:400 14px/1.5 var(--mono);color:var(--muted);margin:0;max-width:52ch}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.product-actions .utility-link{font-size:16px}
/* On light fields the primary pill is ink, as on the home page's acid section. */
.product .action.primary{background:var(--ink);color:var(--white)}
.product .action.primary:hover{background:var(--cobalt);color:var(--white)}

/* The product itself, large, on the page's one color field. */
.product-stage{background:var(--mint);padding:clamp(64px,7vw,120px) 0}
.product-shot{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.6fr);gap:clamp(32px,6vw,110px);align-items:end}
.product-shot>img{display:block;justify-self:center;width:100%;max-width:420px;height:auto;border-radius:24px;box-shadow:0 30px 60px rgba(20,19,34,.28)}
.product-shot>figcaption{border-top:1px solid var(--ink);padding-top:22px;font:400 clamp(18px,1.5vw,22px)/1.48 var(--font);max-width:34ch}

/* An example built from real fixtures. The label sits inside the component. */
.product-example{background:var(--white);border:1px solid var(--ink);border-radius:12px;padding:clamp(20px,3vw,40px);min-width:0}
.product .product-example-label{font:400 13px/1.5 var(--mono);color:var(--muted);margin:0 0 18px;max-width:72ch}
.product .product-example-title{font:700 clamp(24px,2.4vw,34px)/1.12 var(--font);letter-spacing:-.03em;margin:0 0 16px}
.product-example>p{font:400 clamp(17px,1.4vw,20px)/1.5 var(--font);margin:0 0 20px}
.product-checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.product-checks li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding:13px 0;font:400 clamp(16px,1.3vw,19px)/1.45 var(--font)}
.product-checks li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--cobalt);transform:translateY(-1px)}
.product .product-result{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:20px 0 0;font:400 15px/1.5 var(--mono)}
.product-result strong{font:600 17px/1.3 var(--font);background:var(--acid);border-radius:9999px;padding:7px 14px}

/* Sections after the stage: white and cream, each opened by a heading and closed by rules. */
.product-section{background:var(--white);padding:clamp(76px,9vw,140px) 0}
.product-section--alt{background:var(--cream)}
.product-section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.65fr);gap:clamp(30px,6vw,125px);align-items:end;margin-bottom:clamp(44px,6vw,84px)}
.product-section h2{font:700 clamp(46px,5.8vw,92px)/1 var(--font);letter-spacing:-.05em;margin:0;max-width:14ch}
.product-section-head p{font:400 clamp(19px,1.7vw,25px)/1.46 var(--font);margin:0;max-width:36ch}

/* Rule-separated rows: copy at left, the screen or request that shows it at right. */
.product-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.product-rows>li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:start;padding:clamp(40px,4.5vw,72px) 0;border-bottom:1px solid var(--line)}
.product-rows>li>div{min-width:0}
.product-rows h3{font:700 clamp(30px,3.1vw,48px)/1.08 var(--font);letter-spacing:-.04em;margin:0 0 20px;max-width:16ch}
.product-rows p{font:400 clamp(19px,1.6vw,24px)/1.5 var(--font);margin:0 0 18px;max-width:36ch}
.product-rows p:last-child{margin-bottom:0}
.product-media{margin:0;min-width:0}
.product-media figcaption{font:400 15px/1.45 var(--mono);color:var(--muted);margin-top:12px}
.product-phone>img{display:block;width:100%;max-width:340px;height:auto;border-radius:22px;border:1px solid var(--line);background:#0a0a0b}
.product-wide>img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.product-media .product-example{margin-bottom:0}

/* Requests and responses: the site's dark code block, in the mono, scrolling inside its box. */
.product code{font:400 .86em var(--mono);background:rgba(20,19,34,.07);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.product .product-http{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 14px/1.5 var(--mono);margin:0 0 10px;max-width:none}
.product-http b{font-weight:400;color:var(--cobalt)}
.product-http span{color:var(--muted)}
.product pre{margin:0 0 26px;max-width:100%;overflow-x:auto;background:#11101e;color:var(--white);border-radius:12px;padding:20px 22px;font:400 14px/1.6 var(--mono);white-space:pre;tab-size:2}
.product pre:last-child{margin-bottom:0}
.product pre code{font:inherit;background:none;padding:0;border-radius:0;overflow-wrap:normal;color:inherit}

/* Tables of codes and routes: rules only, mono where the cell is code. */
.product-table{max-width:100%;overflow-x:auto;margin:0 0 26px}
.product-table:last-child{margin-bottom:0}
.product-table table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--font)}
.product-table caption{text-align:left;font:600 16px/1.4 var(--font);padding:0 0 10px}
.product-table th{text-align:left;font:400 13px/1.5 var(--mono);color:var(--muted);border-bottom:1px solid var(--ink);padding:8px 16px 8px 0}
.product-table td{border-bottom:1px solid var(--line);padding:11px 16px 11px 0;vertical-align:top}
.product-table td code{white-space:nowrap;overflow-wrap:normal}
.product-table--wide table{min-width:560px}
.product-terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);columns:2;column-gap:32px}
.product-terms li{break-inside:avoid;border-bottom:1px solid var(--line);padding:11px 0;font:400 15px/1.4 var(--mono)}

/* How to start: the next step, then related Writing in the site's list style. */
.product-start{background:var(--white);padding:clamp(76px,9vw,140px) 0}
.product-start-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,auto);gap:clamp(30px,6vw,120px);align-items:end}
.product-start h2{font:700 clamp(46px,5.8vw,92px)/1 var(--font);letter-spacing:-.05em;margin:0 0 22px;max-width:14ch}
.product-start-grid p{font:400 clamp(19px,1.7vw,25px)/1.46 var(--font);margin:0;max-width:40ch}
.product-start-grid .action{justify-self:start;white-space:nowrap}
.product-start .entries-head{margin-top:clamp(64px,7vw,104px)}

/* Keyboard focus on scrolling regions. */
.product pre:focus-visible,.product-table:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}

@media(max-width:1000px){
 .product-shot,.product-section-head,.product-rows>li,.product-start-grid{grid-template-columns:minmax(0,1fr)}
 .product-shot>img{justify-self:start}
 .product-rows>li{gap:30px}
}
@media(max-width:760px){
 .product-head{padding:75px 0 56px}
 .product-head h1{font-size:clamp(65px,15vw,118px)}
 .product-summary{font-size:clamp(21px,5.6vw,26px);margin-bottom:40px}
 .product-head-foot{display:block}
 .product-status{margin-bottom:26px}
 .product-stage,.product-section,.product-start{padding:72px 0}
 .product-shot>img{max-width:300px}
 .product-section h2,.product-start h2{font-size:clamp(40px,10.4vw,64px)}
 .product-section-head{margin-bottom:36px;gap:22px}
 .product-rows>li{padding:36px 0}
 .product-rows h3{font-size:clamp(28px,7.4vw,36px)}
 .product-rows p{font-size:19px}
 .product-phone>img{max-width:260px}
 .product pre{padding:16px 18px;font-size:13px}
 .product-terms{columns:1}
 .product-start-grid .action{margin-top:8px}
}