@import url("tokens.css");

/* Firecase marketing site — plain CSS. Mobile first: everything below is written for
   a 380px phone, and only the two media queries at the bottom adapt it upward. */

.wrap{max-width:var(--content-max);margin:0 auto;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.dark{background:var(--gt-black);color:var(--text-inverse)}
.sunken{background:var(--surface-sunken)}
.eyebrow{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent-on-light)}
.dark .eyebrow{color:var(--text-accent-on-dark)}
.rule{height:var(--rule-accent-w);width:56px;background:var(--accent);border-radius:var(--radius-sm);margin:var(--sp-3) 0 var(--sp-4)}
h1,h2,h3{text-transform:uppercase}
.lead{font-size:var(--fs-body-lg);color:var(--text-secondary);max-width:var(--measure)}
.dark .lead{color:var(--text-inverse-secondary)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:var(--gt-black);border-bottom:1px solid var(--border-inverse)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:var(--sp-4)}
.site-header .bar>a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.site-header img{height:26px;width:auto}
.nav{display:flex;gap:var(--sp-5)}
.nav a{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;color:var(--gt-white);text-decoration:none;min-height:var(--tap-min);display:inline-flex;align-items:center}
.nav a[aria-current="page"]{color:var(--gt-gold)}
.nav a:hover{color:var(--gt-gold-bright)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap-comfortable);padding:0 var(--sp-6);border:var(--border-w-strong) solid transparent;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.btn:active{transform:scale(var(--press-scale))}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-gold)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-gold)}
.btn-dark{background:var(--gt-black);border-color:var(--gt-black);color:var(--gt-white)}
.btn-dark:hover{background:var(--gt-graphite);color:var(--gt-white)}
.btn-outline-inverse{background:transparent;border-color:rgba(255,255,255,.45);color:var(--gt-white)}
.btn-outline-inverse:hover{background:rgba(255,255,255,.1);border-color:var(--accent);color:var(--gt-white)}
.btn-wa{background:var(--wa-green);border-color:var(--wa-green);color:#04241A}
.btn-wa:hover{background:#2FE374;border-color:#2FE374;color:#04241A}
.btn-sm{min-height:var(--tap-min);padding:0 var(--sp-4);font-size:var(--fs-small)}
.btn-block{width:100%}

/* Sticky order bar — this is the checkout */
.order-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--gt-black);border-top:1px solid var(--border-inverse);box-shadow:var(--shadow-sticky);display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--page-gutter) calc(var(--sp-3) + env(safe-area-inset-bottom))}

/* Cards */
.card{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
.card-pad{padding:var(--sp-5)}
/* Product photo slot: one still per finish, 4:3, max 360px wide, on the light grey sunken surface (imperfect knock-outs vanish on light grey; black exposes every flaw). Client files: assets/products/<range>-<finish>.jpg, 800x600, <=60KB. */
.card-photo{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:4/3;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;display:block}
.card-photo img[style*="contain"]{padding:var(--sp-4);box-sizing:border-box}
.card-photo.empty{flex-direction:column;gap:var(--sp-3);border-bottom:1px solid var(--border-hairline)}
.card-photo.empty .hex{width:36px;height:40px;clip-path:var(--clip-hex);border:1px solid rgba(0,0,0,.15)}
.card-photo.empty .lbl{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary)}
.card{background:var(--surface-card)}
/* order.html range blocks — open, sequential */
.range-block+.range-block{margin-top:var(--sp-11);padding-top:var(--sp-9);border-top:1px solid var(--border-hairline)}
.range-head{margin-bottom:var(--sp-6)}
.range-head .tagline{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;color:var(--text-accent-on-light)}
.specials-head{margin-top:var(--sp-9);font-size:var(--fs-h2)}
.grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}

/* Badges, swatches, hex bullets */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-sm);background:var(--gt-gold-tint);color:var(--text-accent-on-light);border:1px solid rgba(217,136,12,.35);white-space:nowrap}
.badge-neutral{background:var(--surface-sunken);color:var(--text-secondary);border-color:var(--border-hairline)}
.badge-on-dark{background:rgba(255,255,255,.08);color:var(--gt-white);border-color:var(--border-inverse)}

/* Inline icons — seven SVGs, no icon font, no CDN */
.icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.with-icon{display:inline-flex;align-items:center;gap:8px}
.swatch{width:16px;height:18px;clip-path:var(--clip-hex);border:1px solid rgba(0,0,0,.2);display:inline-block}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.specs li{display:flex;gap:var(--sp-3);font-size:var(--fs-small);color:var(--text-secondary)}
.specs li::before{content:"";flex:0 0 auto;width:9px;height:10px;margin-top:7px;clip-path:var(--clip-hex);background:var(--accent)}
.specs b{color:var(--text-primary);font-weight:var(--fw-medium);display:block}

/* Prices — one tappable WhatsApp row per size x lock option. Without first, With second. */
.price-rows{display:grid}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap-comfortable);padding:var(--sp-2) 0;border-top:1px solid var(--border-hairline);text-decoration:none;color:var(--text-primary)}
/* The ORDER control. It carries the pre-filled WhatsApp message and is the most important
   control on the site, so it is a real button, not a word. Deliberately NOT the solid gold
   primary fill: order.html repeats this row 96 times and a wall of solid gold would out-shout
   the prices. At rest it is a bordered pill on the gold tint; the solid primary fill appears
   on hover, focus and press. The price stays the darkest, heaviest mark on the row.
   Border is --gt-gold-ink, not --gt-gold-deep: gold-deep measures 2.81 on white and misses
   the 3:1 non-text minimum. */
.price-row:hover .go,.price-row:focus-visible .go{background:var(--accent);border-color:var(--accent);color:var(--text-on-gold)}
.price-row:active .go{background:var(--accent-press);border-color:var(--accent-press);color:var(--text-on-gold);transform:scale(var(--press-scale))}
/* Keyboard focus. --focus-ring is --gt-gold, which is 10.4:1 on black but only 2.03:1 on a
   white card, so it cannot carry a focus ring here; --gt-gold-ink is 6.39:1 on white. */
.price-row:focus-visible{outline:3px solid var(--gt-gold-ink);outline-offset:2px}
.price-row>span:first-child{display:grid;gap:2px}
.price-row b{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.03em}
.price-row small{font-size:var(--fs-micro);color:var(--text-secondary)}
.price-row .dims{color:var(--text-muted);font-variant-numeric:tabular-nums}
.price-cell{display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto}
.price{font-weight:var(--fw-bold);font-size:var(--fs-price-sm);font-variant-numeric:var(--numeric-price);letter-spacing:-.01em}
.go{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-height:var(--tap-min);padding:0 var(--sp-4);background:var(--surface-accent-tint);border:1px solid var(--gt-gold-ink);border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent-on-light);transition:var(--transition-control)}
/* WhatsApp glyph, masked so it inherits the label colour. Only drawn where masks are
   supported, so an unsupporting browser gets the pill with no stray box. */
@supports ((mask-image:url('')) or (-webkit-mask-image:url(''))){
  .go::before{content:"";flex:0 0 auto;width:13px;height:13px;background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%200-8.6%2015.1L2%2022l5.1-1.3A10%2010%200%201%200%2012%202zm0%202a8%208%200%201%201-4.2%2014.8l-.4-.2-2.6.7.7-2.5-.3-.4A8%208%200%200%201%2012%204zm-3.1%204.3c-.2%200-.5.1-.7.4-.3.3-.9.9-.9%202.1s.9%202.4%201%202.6c.1.2%201.7%202.7%204.2%203.7%202%20.8%202.5.7%202.9.6.5-.1%201.5-.6%201.7-1.2.2-.6.2-1.1.1-1.2%200-.1-.2-.2-.5-.3l-1.6-.8c-.2-.1-.4-.1-.6.1l-.7.9c-.1.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.3-1.6-1.5-1.8-.1-.2%200-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5%200-.2%200-.3-.1-.5l-.7-1.7c-.2-.4-.4-.4-.6-.4z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%200-8.6%2015.1L2%2022l5.1-1.3A10%2010%200%201%200%2012%202zm0%202a8%208%200%201%201-4.2%2014.8l-.4-.2-2.6.7.7-2.5-.3-.4A8%208%200%200%201%2012%204zm-3.1%204.3c-.2%200-.5.1-.7.4-.3.3-.9.9-.9%202.1s.9%202.4%201%202.6c.1.2%201.7%202.7%204.2%203.7%202%20.8%202.5.7%202.9.6.5-.1%201.5-.6%201.7-1.2.2-.6.2-1.1.1-1.2%200-.1-.2-.2-.5-.3l-1.6-.8c-.2-.1-.4-.1-.6.1l-.7.9c-.1.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.3-1.6-1.5-1.8-.1-.2%200-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5%200-.2%200-.3-.1-.5l-.7-1.7c-.2-.4-.4-.4-.6-.4z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
}
.price-flat{font-weight:var(--fw-bold);font-size:var(--fs-price-lg);font-variant-numeric:var(--numeric-price)}

/* Range toggle */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:rgba(255,255,255,.07);border:1px solid var(--border-inverse);border-radius:var(--radius-md);max-width:420px}
.segmented button{min-height:var(--tap-min);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-inverse-secondary);font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:var(--transition-control)}
.segmented button[aria-selected="true"]{background:var(--accent);color:var(--text-on-gold)}
.segmented-light{background:var(--surface-sunken);border-color:var(--border-hairline)}
.segmented-light button{color:var(--text-secondary)}
.segmented-light button[aria-selected="true"]{color:var(--text-on-gold)}
#prices{scroll-margin-top:72px}

/* Hero ratings — the sales argument. Huge numerals, Hexa first, stacked on phone, side by side from 760px */
.ratings{display:grid;gap:var(--sp-6);margin-top:var(--sp-7);max-width:460px}
.rating b{display:block;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(64px,20vw,112px);line-height:.95;letter-spacing:-.03em;color:var(--gt-gold);font-variant-numeric:var(--numeric-price)}
.rating .range{display:block;margin-top:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.04em;color:var(--gt-white)}
.rating .pos{display:block;margin-top:var(--sp-1);font-size:var(--fs-small);color:var(--text-inverse-secondary)}

/* Accordion */
details{border-bottom:1px solid var(--border-hairline)}
details:first-of-type{border-top:1px solid var(--border-hairline)}
summary{list-style:none;min-height:var(--tap-comfortable);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 auto;width:12px;height:14px;clip-path:var(--clip-hex);background:var(--gt-mist)}
details[open] summary::after{background:var(--accent)}
details p{padding-bottom:var(--sp-4);font-size:var(--fs-small);color:var(--text-secondary);max-width:var(--measure)}

/* Footer */
.site-footer{background:var(--gt-black);color:var(--text-inverse-secondary);padding:var(--sp-9) 0 calc(var(--sp-11) + 24px)}
.site-footer img{height:30px;width:auto}
.site-footer a{color:var(--gt-gold);display:inline-flex;align-items:center;min-height:var(--tap-min)}
.site-footer .with-icon{display:flex}
.site-footer .contact{display:grid;gap:var(--sp-1)}
.site-footer .email{font-size:var(--fs-small);text-decoration:none;word-break:break-all}
/* Locations. Stores and distributors are separate groups; distributors sit behind a hairline with a note. Text is printed exactly as the client supplied it. */
.site-footer .locations{display:grid;gap:var(--sp-7)}
.loc-group{display:grid;gap:var(--sp-4)}
.loc-group.dist{border-left:2px solid var(--border-inverse);padding-left:var(--sp-4)}
.loc-lbl{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gt-gold)}
.loc-group.dist .loc-lbl{color:var(--gt-ash)}
.loc-note{font-size:var(--fs-micro);color:var(--gt-ash);margin-top:calc(-1 * var(--sp-3))}
.loc{font-style:normal;display:grid;gap:2px;font-size:var(--fs-small);line-height:1.45;color:var(--text-inverse-secondary)}
.loc b{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em;color:var(--gt-white)}
.loc-group.dist .loc b{color:var(--text-inverse-secondary)}
.loc-tel{justify-self:start;color:var(--gt-gold);text-decoration:none;font-variant-numeric:tabular-nums;min-height:var(--tap-min);display:inline-flex;align-items:center}
.todo{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text-accent-on-light);background:var(--gt-gold-tint);padding:6px 8px;border-radius:var(--radius-sm);display:inline-block}

/* Hero — landscape 16:9 burn clip (assets/burn-loop.mp4 + burn-poster.jpg) full-bleed behind the type. Silent looping video with poster.
   Until the client's assets/burn-loop.mp4 + burn-poster.jpg exist, the .placeholder block is the visible layer. */
.hero{background:var(--gt-black);color:var(--gt-white);padding:var(--sp-9) 0 var(--sp-8);position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media video,.hero-media img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.is-playing img.poster{display:none}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.75),rgba(11,11,11,.75)),var(--gradient-soot)}
.placeholder{position:absolute;inset:0;background:var(--gt-black);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-5)}
.placeholder span{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gt-gold);border:1px solid var(--border-inverse);padding:10px 14px;border-radius:var(--radius-sm)}
.is-playing .placeholder,.has-poster .placeholder{display:none}
.hero .hex-accent{position:absolute;right:-12px;top:-14px;height:var(--hex-accent-size);width:auto;pointer-events:none;z-index:1}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{color:var(--text-accent-on-dark)}
.hero .lead{color:var(--text-inverse-secondary)}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--gt-white)}
/* Case photos always sit on --surface-sunken, never on black (knock-out residue shows on black). */
.hero-case{width:100%;max-width:460px;margin-top:var(--sp-8);background:var(--surface-sunken);padding:var(--sp-4);border-radius:var(--radius-md)}
.hero-case img{width:100%;height:auto;display:block}
.cta-stack{display:grid;gap:var(--sp-3);margin-top:var(--sp-6);max-width:340px}
/* Grade A1 section: the payoff. Portrait 9:16 aftermath clip — full-width on phone, a column beside the copy on desktop. Never landscape. */
.proof-grid{display:grid;gap:var(--sp-6);padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.proof .footage.portrait{position:relative;width:100%;aspect-ratio:9/16;background:var(--gt-black);overflow:hidden;border-radius:var(--radius-lg)}
.proof .footage video,.proof .footage img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:760px){
  .proof-grid{grid-template-columns:minmax(260px,360px) minmax(0,1fr);align-items:center;gap:var(--sp-9)}
}

@media (min-width:760px){
  .loc-group{grid-template-columns:1fr 1fr}
  .loc-group .loc-lbl,.loc-group .loc-note{grid-column:1 / -1}
  .grid{grid-template-columns:1fr 1fr}
  .cta-stack{grid-template-columns:auto auto;max-width:none;justify-content:start}
  .ratings{grid-template-columns:1fr 1fr;max-width:none}
}
@media (min-width:1040px){ .grid{grid-template-columns:1fr 1fr 1fr} }

/* ---- locations.html (design only, not live) ---- */
.loc-list{display:grid;gap:var(--sp-6);margin-top:var(--sp-6)}
.loc-card{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
.loc-card.dist{border-left:3px solid var(--border-hairline);box-shadow:none;background:transparent}
.loc-body{padding:var(--sp-5)}
.loc-directions{padding:0 var(--sp-5) var(--sp-5)}
.loc-body h3{font-size:var(--fs-h3)}
.loc-body address.loc{color:var(--text-secondary);font-size:var(--fs-body)}
.loc-body address.loc span{display:block}
/* Storefront photo: one 4:3 still, max 480px wide. Empty state when the file is missing. */
.storefront{margin:0;position:relative;width:100%;max-width:480px;aspect-ratio:4/3;background:var(--gt-black);overflow:hidden}
.storefront img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.storefront figcaption{display:none}
.storefront.empty figcaption{display:flex}
.empty-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gt-ash);text-align:center;padding:var(--sp-4)}
.empty-lbl .hex{width:28px;height:32px;clip-path:var(--clip-hex);background:var(--accent)}
/* Direction videos: portrait 9:16, tap to play, poster only until tapped. One column on phone, up to three across on desktop. */
.directions{display:grid;gap:var(--sp-4);margin-top:var(--sp-3)}
.directions.empty{position:relative;aspect-ratio:16/7;background:var(--surface-sunken);border-radius:var(--radius-md)}
.directions.empty .empty-lbl{color:var(--text-secondary)}
.direction{margin:0;display:grid;gap:var(--sp-2)}
.direction-slot{position:relative;width:100%;max-width:360px;aspect-ratio:9/16;background:var(--gt-black);border-radius:var(--radius-md);overflow:hidden}
.direction-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.direction-slot .empty-lbl,.direction-slot .poster-probe{display:none}
.direction-slot.no-poster .empty-lbl{display:flex;pointer-events:none}
.direction-slot.no-poster video{opacity:0}
.direction figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.direction figcaption b{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.04em}
.direction figcaption span{font-size:var(--fs-micro);color:var(--text-secondary)}
@media (min-width:760px){
  /* Store card: photo + address side by side in row 1; directions span the full width in row 2 so up to three portrait videos sit across. */
  .loc-card{display:grid;grid-template-columns:minmax(240px,480px) minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
  .loc-card .storefront{grid-row:1}
  .loc-card .loc-body{grid-row:1;grid-column:2}
  .loc-card .loc-directions{grid-row:2;grid-column:1 / -1;padding-top:var(--sp-2)}
  .loc-card.dist{grid-template-columns:1fr}
  .loc-card.dist .loc-body{grid-column:1}
  .directions[data-count]{grid-template-columns:repeat(auto-fit,minmax(200px,280px))}
}