/* The nine generated app pages. Base type, buttons, framed screens, and chrome come from
   family.css; this file adds the product layout. Each page sets --accent and --tint on <body>
   and a hero-tall / hero-square / hero-wide class for the shape of its first screen. */
.tf-product .crumb{font-size:13px;font-weight:700;color:var(--ink-3);padding-top:18px}
.tf-product .crumb a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hairline)}
.tf-product .crumb a:hover{color:var(--ink);text-decoration-color:var(--gold)}

/* ---- Hero ---- */
.tf-product .product-hero{padding:22px 0 24px}
.tf-product .product-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.tf-product.hero-wide .product-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.tf-product.hero-tall .product-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.tf-product .identity{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:26px}
.tf-product .identity img{width:44px;height:44px;border-radius:12px;box-shadow:var(--sh-1)}
.tf-product .product-copy h1{font-size:clamp(42px,5.4vw,66px);max-width:12ch}
.tf-product .product-copy h1 em{display:block;color:var(--accent)}
.tf-product .product-copy .lede{max-width:44ch}
.tf-product .quick-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 24px}
.tf-product .quick-facts li{font-size:13px;font-weight:800;color:var(--ink-2);background:var(--card);border:1px solid var(--hairline);border-radius:999px;padding:7px 13px;box-shadow:var(--sh-1)}
.tf-product .product-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tf-product .stores{display:flex;flex-wrap:wrap;gap:10px}
.tf-product .store{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:8px 18px 8px 16px;border-radius:var(--r-art);border:1px solid var(--hairline);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--sh-1);transition:border-color .16s,box-shadow .16s,transform .12s var(--ease)}
.tf-product .store:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-2)}
.tf-product .store span{display:flex;flex-direction:column;gap:2px;text-align:left}
.tf-product .store small{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);line-height:1;font-weight:700}
.tf-product .store b{font-weight:800;font-size:16px;line-height:1.1}
.tf-product .store svg{flex:none}
.tf-product .free-line{margin-top:16px;font-size:14px;font-weight:600;color:var(--ink-3)}
.tf-product .free-line b{color:var(--ink);font-weight:800}
.tf-product .product-art{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.tf-product .product-art figcaption{font-size:13px;font-weight:700;color:var(--ink-3)}

/* ---- Tinted panels that hold real screens ---- */
.tf-product .panel{display:flex;align-items:center;justify-content:center;gap:4%;width:100%;background:var(--tint);border-radius:28px;padding:6%;overflow:hidden;box-shadow:var(--sh-2)}
.tf-product .panel .screen{height:100%}
.tf-product .panel .screen.window,.tf-product .panel .screen.pad{height:auto;width:100%;max-height:100%}
.tf-product .panel .screen.window{box-shadow:0 1px 2px rgba(35,50,62,.1),0 18px 36px -16px rgba(35,50,62,.35)}
.tf-product .panel-hero{aspect-ratio:1}
.tf-product.hero-tall .panel-hero{aspect-ratio:5/6;padding:6% 8%}
.tf-product.hero-wide .panel-hero{aspect-ratio:4/3;padding:5%}
.tf-product .panel-wide{aspect-ratio:4/3;padding:5%}
.tf-product .panel-row{padding:4% 5%;gap:4%}
.tf-product .panel-row .screen,.tf-product .panel-row .tile{height:auto;width:29.33%;flex:none}
.tf-product .panel-row.panel-tall .screen{width:26%}
.tf-product .tile{display:block;position:relative;height:100%;aspect-ratio:var(--ar,2/3);border-radius:18px;overflow:hidden;box-shadow:var(--sh-screen);background:#1F2A33;flex:none}
.tf-product .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tf-product .pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2%;width:100%}
.tf-product .pair .screen{width:100%;height:auto}
.tf-product .pair-arrow{font-family:var(--serif);font-size:44px;line-height:1;color:var(--accent);font-weight:700}
.tf-product .panel-pair{aspect-ratio:auto;padding:4% 4%}

/* ---- A look inside ---- */
.tf-product .inside{padding-top:64px;border-top:1px solid var(--hairline);margin-top:28px;scroll-margin-top:16px}
.tf-product .inside .sec-head{margin-bottom:32px}
.tf-product .step{display:block;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.tf-product .row-captions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:22px 0 0;padding:0 6px;list-style:none;counter-reset:caption}
.tf-product .row-captions li{counter-increment:caption}
.tf-product .row-captions .step::before{content:"0" counter(caption)}
.tf-product .row-captions h3,.tf-product .gallery h3{font-size:21px;line-height:1.2}
.tf-product .row-captions p,.tf-product .gallery figcaption p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.tf-product .gallery-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.tf-product .gallery-wide figure{margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center}
.tf-product .gallery-wide figure:nth-child(even) .panel{order:2}
.tf-product .gallery-wide .pair-figure{grid-template-columns:minmax(0,1fr);gap:18px;text-align:center}
.tf-product .gallery-wide .pair-figure figcaption p{margin-inline:auto}
.tf-product .gallery-wide figcaption{padding:0}
.tf-product .gallery-wide h3{font-size:26px}
.tf-product .gallery-wide figcaption p{font-size:16px;max-width:40ch}

/* ---- At a glance + for you ---- */
.tf-product .glance-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:stretch;margin-top:56px}
.tf-product .glance-head{background:var(--card);border-radius:var(--r-card);padding:28px 30px 30px;box-shadow:var(--sh-2)}
.tf-product .glance-head h2{font-size:24px;margin-bottom:16px}
.tf-product .glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.tf-product .glance dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}
.tf-product .glance dd{font-size:15px;font-weight:700;color:var(--ink);line-height:1.45;text-wrap:pretty}
.tf-product .for-you{background:var(--tint);border-radius:var(--r-card);padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.tf-product .for-you .eyebrow{color:var(--accent)}
.tf-product .for-you p:last-child{font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.4vw,26px);line-height:1.3;color:var(--ink);text-wrap:pretty}

/* ---- Closing, help links, related ---- */
.tf-product .closing-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;background:var(--tint);border-radius:var(--r-band);padding:44px 48px;scroll-margin-top:16px}
.tf-product .closing-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.tf-product .closing-actions .product-actions{align-items:flex-end}
.tf-product .closing-actions .stores{justify-content:flex-end}
.tf-product .tip{font-size:13px;font-weight:600;color:var(--ink-3);text-align:right}
.tf-product .tip a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.tf-product .resources .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;padding:4px 0 8px}
.tf-product .resources a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:800;color:var(--ink-2);text-decoration:none}
.tf-product .resources a:hover{color:var(--ink);background:var(--paper-deep)}
.tf-product .related{border-top:1px solid var(--hairline)}
.tf-product .related .sec-head{margin-bottom:28px}
.tf-product .related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tf-product .related-grid a{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--card);border-radius:18px;box-shadow:var(--sh-1);text-decoration:none;transition:box-shadow .16s,transform .12s var(--ease)}
.tf-product .related-grid a:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.tf-product .related-grid img{width:56px;height:56px;border-radius:15px;flex:none;box-shadow:var(--sh-1)}
.tf-product .related-grid b{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.tf-product .related-grid small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;font-weight:600}
.tf-product .related-grid .arrow{margin-left:auto;font-size:22px;color:var(--ink-3)}
.tf-product .related-all{text-align:center;margin-top:22px}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .tf-product .product-hero-grid,.tf-product.hero-wide .product-hero-grid,.tf-product.hero-tall .product-hero-grid{gap:32px}
  .tf-product .gallery-wide figure{gap:24px}
  .tf-product .closing-band{padding:36px}
  .tf-product .glance-row{gap:20px}
}
@media (max-width:820px){
  .tf-product .product-hero-grid,.tf-product.hero-wide .product-hero-grid,.tf-product.hero-tall .product-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .tf-product .product-art{width:min(520px,100%);margin-inline:auto}
  .tf-product.hero-wide .product-art{width:100%}
  .tf-product .inside{padding-top:48px}
  .tf-product .panel-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;justify-content:flex-start;gap:14px;padding:18px;scrollbar-width:thin}
  .tf-product .panel-row .screen,.tf-product .panel-row .tile,.tf-product .panel-row.panel-tall .screen{width:min(62%,260px);scroll-snap-align:center}
  .tf-product .panel-row .screen.tablet{width:min(72%,300px)}
  .tf-product .row-captions{grid-template-columns:minmax(0,1fr);gap:18px}
  .tf-product .gallery-wide figure{grid-template-columns:minmax(0,1fr);gap:14px}
  .tf-product .gallery-wide figure:nth-child(even) .panel{order:0}
  .tf-product .gallery-wide h3{font-size:22px}
  .tf-product .pair{grid-template-columns:1fr;gap:10px}
  .tf-product .pair-arrow{transform:rotate(90deg);justify-self:center}
  .tf-product .glance-row{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .tf-product .closing-band{grid-template-columns:minmax(0,1fr);padding:30px 26px;border-radius:24px}
  .tf-product .closing-actions{align-items:flex-start}
  .tf-product .closing-actions .product-actions{align-items:flex-start}
  .tf-product .closing-actions .stores{justify-content:flex-start}
  .tf-product .tip{text-align:left}
  .tf-product .related-grid{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:559px){
  .tf-product .product-copy h1{font-size:clamp(38px,10vw,46px);max-width:14ch}
  .tf-product .identity{margin-bottom:20px;font-size:15px}
  .tf-product .identity img{width:36px;height:36px}
  .tf-product .quick-facts{margin:18px 0 20px}
  .tf-product .quick-facts li{font-size:12px;padding:6px 11px}
  .tf-product .product-actions,.tf-product .stores{width:100%}
  .tf-product .stores>*{flex:1 1 auto;justify-content:center}
  .tf-product .product-actions .btn-lg{width:100%}
  .tf-product .panel{border-radius:22px}
  .tf-product .glance{grid-template-columns:minmax(0,1fr)}
  .tf-product .glance-head,.tf-product .for-you{padding:22px 20px}
  .tf-product .resources .wrap{justify-content:flex-start}
}