/* Wispr Growth OS — only for logged-in Wispr teammates. The one window on the 1999 desktop that isn't 1999:
   it fills the screen in Wispr Flow's own look (Lumen paper, Vast ink, EB Garamond over Figtree; sampled from
   wisprflow.ai, Nov 2026), laid out as a bento of soft cards. */

.win--gos, .gos {
  --lumen: #ffffeb; --vast: #1a1a1a; --paper: #fffdf9; --line: #e4e4d0; --line-2: #cfcfb8; --mute: #5d5d52;
  --fathom: #034f46; --dawn: #f0d7ff; --signal: #ffbcf2; --glow: #ffa946; --flare: #ff6c4c; --pulse: #7f1c34;
  /* the desktop's 1999 colours, re-mapped so module and campaign colours land on Wispr's palette */
  --bondi: var(--fathom); --lime: var(--dawn); --tangerine: var(--glow); --grape: var(--signal); --strawberry: var(--flare);
  --plat-1: var(--paper); --plat-2: var(--lumen); --plat-3: var(--line); --plat-4: var(--line-2);
  --serif: "EB Garamond", Georgia, serif; --sans: Figtree, system-ui, sans-serif;
  --r: 20px; --r-sm: 12px;
}

/* ---- the window: full screen, a Wispr app bar instead of Platinum chrome */
.win.win--gos { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-height: none; border: 0; border-radius: 0; background: var(--lumen); color: var(--vast); box-shadow: none; font: 400 15px/1.5 var(--sans); }
.win--gos .win__bar { height: 60px; padding: 0 20px 0 24px; gap: 12px; background: var(--lumen); border-bottom: 1px solid var(--line); cursor: default; }
.win--gos .win__stripes, .win--gos .win__shade { display: none; }
.win--gos .win__title { order: 1; margin: 0; padding: 0; background: none; max-width: none; display: flex; align-items: center; gap: 10px; font: 600 17px/1 var(--sans); letter-spacing: -.01em; }
.win--gos .win__title::before { content: ""; width: 22px; height: 18px; flex: none; background: var(--vast); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Crect x='0' y='6' width='3' height='6' rx='1.5'/%3E%3Crect x='5' y='2' width='3' height='14' rx='1.5'/%3E%3Crect x='10' y='0' width='3' height='18' rx='1.5'/%3E%3Crect x='15' y='4' width='3' height='10' rx='1.5'/%3E%3Crect x='19' y='7' width='3' height='4' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Crect x='0' y='6' width='3' height='6' rx='1.5'/%3E%3Crect x='5' y='2' width='3' height='14' rx='1.5'/%3E%3Crect x='10' y='0' width='3' height='18' rx='1.5'/%3E%3Crect x='15' y='4' width='3' height='10' rx='1.5'/%3E%3Crect x='19' y='7' width='3' height='4' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.win--gos .win__close { order: 3; margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--line); }
.win--gos .win__close::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 14px/1 var(--sans); color: var(--vast); }
.win--gos .win__close:hover { background: var(--vast); }
.win--gos .win__close:hover::after { color: var(--lumen); }
.win--gos .win__close:active { background: var(--vast); }
.win--gos .win__body { padding: 0; display: flex; background: var(--lumen); box-shadow: none; }

/* shared controls, Wispr style */
.win--gos .btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--vast); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .15s, box-shadow .15s; }
.win--gos .btn:hover { box-shadow: inset 0 0 0 1.5px var(--vast); }
.win--gos .btn--primary { background: var(--dawn); box-shadow: none; }
.win--gos .btn--primary:hover { background: #e6c3fb; box-shadow: none; }
.win--gos .btn--sm { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.win--gos .btn:disabled { opacity: .5; cursor: default; }
.win--gos .field { width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--vast); font: 400 15px/1.4 var(--sans); box-shadow: none; }
.win--gos .field:focus { outline: none; border-color: var(--vast); }
.win--gos .field--area { min-height: 96px; resize: vertical; }
.win--gos a { color: var(--fathom); }
.win--gos :focus-visible { outline: 2px solid var(--fathom); outline-offset: 2px; }

.gos { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 252px 1fr; }

/* ---- sidebar */
.gos__side { min-height: 0; overflow: auto; padding: 28px 16px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.gos__hello { margin: 0 8px; font: 400 40px/1 var(--serif); letter-spacing: -.02em; color: var(--vast); }
.gos__sub { margin: 0 8px 6px; font: 400 14px/1.45 var(--sans); color: var(--mute); }
.gos__nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.gos__navbtn { width: 100%; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--vast); font: 500 14.5px/1.2 var(--sans); text-align: left; cursor: pointer; transition: background .15s; }
.gos__navbtn:hover { background: var(--line); }
.gos__navbtn[aria-current="page"] { background: var(--vast); color: var(--lumen); }
.gos__chip { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--fathom)); box-shadow: inset 0 0 0 1px rgba(26,26,26,.15); }
.gos__navbtn[aria-current="page"] .gos__chip { box-shadow: 0 0 0 2px var(--vast), 0 0 0 3px rgba(255,255,235,.5); }
.gos__count { font: 600 12px var(--sans); opacity: .55; font-variant-numeric: tabular-nums; }
.gos__navsep { height: 1px; margin: 6px 12px; background: var(--line); }
.gos__foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); font: 400 12.5px/1.5 var(--sans); color: var(--mute); }
.gos__foot button { padding: 0; border: 0; background: none; color: var(--vast); font: 600 12.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- main pane: a tinted panel, like the reference's inner frame */
.gos__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px; }
.gos__back { display: none; }
.gos__page { flex: 1; min-height: 0; overflow: auto; padding: 36px 40px 48px; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); outline: none; }
.gos__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.gos__kicker { margin: 0 0 10px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.gos__title { margin: 0; font: 400 clamp(44px, 5vw, 68px)/.95 var(--serif); letter-spacing: -.03em; color: var(--vast); }
.gos__why { margin: 14px 0 0; max-width: 60ch; font: 400 16px/1.55 var(--sans); color: #33332c; }
.gos__tools { display: flex; gap: 8px; flex-wrap: wrap; }

/* group box → a soft card */
.gbox { position: relative; margin: 16px 0 0; padding: 24px; border-radius: var(--r); background: var(--lumen); }
.gbox > .gbox__label { display: block; margin: 0 0 14px; font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; color: var(--vast); }
.gbox--white { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gbox p { margin: 0 0 10px; font: 400 15px/1.6 var(--sans); color: #2a2a24; }
.gbox p:last-child { margin-bottom: 0; }

.gos-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gos-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.win--gos .card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 0; border-radius: var(--r); background: var(--lumen); color: var(--vast); text-align: left; font: 400 14px/1.5 var(--sans); transition: transform .2s, box-shadow .2s, background .2s; }
.win--gos .card::before { content: ""; width: 28px; height: 6px; border-radius: 999px; background: var(--c, var(--fathom)); }
.win--gos button.card { cursor: pointer; }
.win--gos button.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(26,26,26,.25); background: #fff; }
.win--gos .card[aria-pressed="true"] { background: var(--vast); color: var(--lumen); }
.win--gos .card[aria-pressed="true"] .card__p, .win--gos .card[aria-pressed="true"] .card__meta { color: #d8d8c4; }
.win--gos .card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.win--gos .card__t { margin: 0; font: 400 24px/1.1 var(--serif); letter-spacing: -.01em; }
.win--gos .card__p { margin: 0; color: #3c3c34; }
.win--gos .card__meta { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 12.5px var(--sans); color: var(--mute); }

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--line); font: 600 11.5px/1.2 var(--sans); white-space: nowrap; color: var(--vast); }
.tag--approved { background: #cfe8dc; }
.tag--live { background: var(--dawn); }
.tag--done { background: var(--line); color: var(--mute); }
.tag--cut { background: #ffd9cf; text-decoration: line-through; }
.tag--sample { background: #fff0d9; color: #7a4b00; }
.tag--real { background: #d6ece6; color: var(--fathom); }
.tag--warn { background: #ffe0d4; color: var(--pulse); }
.win--gos .card[aria-pressed="true"] .tag { background: rgba(255,255,235,.14); color: var(--lumen); }

/* the second-order block on every brief */
.so { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.so__cell { padding: 16px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.so__k { margin: 0 0 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.so__cell--back .so__k { color: var(--flare); }
.so__cell--comp .so__k { color: var(--fathom); }
.so__cell--kill .so__k { color: var(--pulse); }
.so__v { margin: 0; font: 400 14px/1.55 var(--sans); color: #2a2a24; }

.dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 10px 20px; font: 400 15px/1.55 var(--sans); }
.dl dt { font-weight: 600; color: var(--vast); }
.dl dd { margin: 0; color: #2a2a24; }

.ul { margin: 0; padding-left: 20px; font: 400 15px/1.6 var(--sans); color: #2a2a24; }
.ul li + li { margin-top: 6px; }
.ul li::marker { color: var(--mute); }
.src { font: 600 10.5px var(--sans); color: var(--fathom); text-decoration: none; vertical-align: super; margin-left: 1px; }
.src:hover { text-decoration: underline; }

/* tabs inside a module: Wispr's segmented pill (Dictation | Notetaker) */
.gtabs { display: inline-flex; max-width: 100%; gap: 2px; margin: 0 0 16px; padding: 4px; border-radius: 999px; background: var(--line); overflow-x: auto; scrollbar-width: none; }
.gtabs::-webkit-scrollbar { display: none; }
.gtab { flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--vast); font: 600 14px var(--sans); cursor: pointer; }
.gtab[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(26,26,26,.12); }
.gtabpane { padding: 0; border: 0; background: none; }

/* toolbars, filters, small forms */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.bar .field { width: auto; flex: 1 1 200px; min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 999px; }
.sel { min-height: 40px; padding: 0 34px 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center no-repeat; -webkit-appearance: none; appearance: none; color: var(--vast); font: 500 14px var(--sans); cursor: pointer; }
.form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form label { display: grid; gap: 6px; font: 600 13px var(--sans); color: var(--vast); }
.form .field { min-height: 44px; font-size: 15px; }
.form .full { grid-column: 1 / -1; }
.form__row { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* tables */
.tbl-wrap { overflow: auto; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tbl { width: 100%; border-collapse: collapse; font: 400 14px/1.45 var(--sans); color: var(--vast); }
.tbl th { position: sticky; top: 0; z-index: 1; padding: 14px 14px 12px; background: #fff; border-bottom: 1px solid var(--line); text-align: left; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tbl td { padding: 14px; border-bottom: 1px solid #f0f0e2; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: #fdfdf1; }
.tbl tr.is-on td { background: #fbf3ff; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .muted { color: var(--mute); }
.tbl .tbl__name { font-weight: 600; }
.tbl .tbl__sub { display: block; font-size: 13px; color: var(--mute); font-weight: 400; }
.tbl .sel { min-height: 34px; font-size: 13px; }
.is-overdue { color: var(--flare); font-weight: 600; }
.star { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; font-size: 17px; line-height: 1; cursor: pointer; color: var(--line-2); }
.star[aria-pressed="true"] { color: var(--glow); }
.star:hover { background: var(--line); }

/* timeline: weeks across, campaigns down */
.tl { --wk: 38px; position: relative; overflow-x: auto; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tl__in { position: relative; min-width: calc(220px + var(--n) * var(--wk)); }
.tl__months, .tl__row { display: grid; grid-template-columns: 220px 1fr; }
.tl__months { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); font: 600 12px/40px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tl__mrow { position: relative; height: 40px; }
.tl__m { position: absolute; top: 0; height: 40px; padding-left: 8px; border-left: 1px solid var(--line); white-space: nowrap; }
.tl__row { min-height: 44px; border-bottom: 1px solid #f0f0e2; }
.tl__name { padding: 12px 14px; font: 500 14px/1.25 var(--sans); border: 0; border-right: 1px solid var(--line); background: #fff; position: sticky; left: 0; z-index: 1; text-align: left; cursor: pointer; color: var(--vast); margin-bottom: -1px; box-shadow: inset 0 -1px 0 #f0f0e2; }
.tl__name:hover { color: var(--fathom); }
.tl__track { position: relative; background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--wk) - 1px), #f4f4e8 calc(var(--wk) - 1px) var(--wk)); }
.tl__bar { position: absolute; top: 11px; height: 22px; border: 0; border-radius: 999px; background: var(--c, var(--fathom)); cursor: pointer; transition: filter .15s; }
.tl__bar:hover { filter: brightness(.92); }
.tl__bar.is-cut { background: repeating-linear-gradient(45deg, #ffd9cf 0 5px, #fff 5px 10px); }
.tl__mark { position: absolute; top: 40px; bottom: 0; width: 0; border-left: 1.5px dashed var(--flare); z-index: 0; pointer-events: none; }
.tl__marklabel { position: absolute; top: 4px; left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--flare); font: 600 11px var(--sans); color: #fff; white-space: nowrap; }
.tl__today { border-left: 2px solid var(--vast); }
.tl__today .tl__marklabel { top: auto; bottom: 6px; background: var(--vast); color: var(--lumen); }
.agenda { display: none; }

/* detail drawer: the brief, a dark card under the light ones */
.brief { margin-top: 20px; padding: 32px; border-radius: 28px; background: var(--vast); color: var(--lumen); }
.brief__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.brief__t { margin: 0; font: 400 clamp(32px, 3.4vw, 44px)/1 var(--serif); letter-spacing: -.02em; }
.brief__dates { margin: 8px 0 0; font: 500 14px var(--sans); color: #bdbdab; }
.brief .gbox { background: rgba(255,255,235,.06); }
.brief .gbox > .gbox__label { color: var(--lumen); }
.brief .gbox p, .brief .ul, .brief .dl dd, .brief .check label { color: #e4e4d0; }
.brief .dl dt { color: var(--lumen); }
.brief .so__cell { background: rgba(255,255,235,.06); box-shadow: none; }
.brief .so__v { color: #e4e4d0; }
.brief .so__k { color: #bdbdab; }
.brief .so__cell--back .so__k { color: #ff9a82; }
.brief .so__cell--comp .so__k { color: #8fd6c0; }
.brief .so__cell--kill .so__k { color: var(--signal); }
.brief .tag { background: rgba(255,255,235,.14); color: var(--lumen); }
.brief .btn { background: rgba(255,255,235,.1); box-shadow: none; color: var(--lumen); }
.brief .btn:hover { background: rgba(255,255,235,.2); }
.brief .btn--primary { background: var(--dawn); color: var(--vast); }
.brief a, .brief .src { color: #8fd6c0; }
.brief .quote { background: rgba(255,255,235,.06); color: var(--lumen); }
.brief .sel { background-color: rgba(255,255,235,.08); border-color: rgba(255,255,235,.18); color: var(--lumen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffeb' stroke-width='1.5'/%3E%3C/svg%3E"); }
.brief .sel option { color: var(--vast); }
.brief .field { background: rgba(255,255,235,.06); border-color: rgba(255,255,235,.18); color: var(--lumen); }

/* KPI tiles (names and methods, no numbers) */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kpi { padding: 22px; border-radius: var(--r); background: var(--lumen); display: grid; gap: 8px; align-content: start; }
.kpi__k { font: 600 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.kpi__v { font: 400 34px/1 var(--serif); color: var(--vast); font-variant-numeric: tabular-nums; }
.kpi__d { font: 400 13.5px/1.5 var(--sans); color: #45453c; }
.kpi--north { grid-column: span 2; padding: 32px; border-radius: 28px; background: var(--fathom); color: var(--lumen); }
.kpi--north .kpi__k { color: #9fd1c4; }
.kpi--north .kpi__d { color: #d6ece6; }
.kpi--north .src { color: var(--dawn); }
.kpi--north .kpi__v { color: var(--lumen); font-size: 44px; }
.spark { display: block; width: 100%; height: 26px; }
.funnel { display: grid; gap: 8px; }
.funnel__row { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 12px; font: 500 14px var(--sans); }
.funnel__bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--fathom)); }

/* score meter (collabs, brand) */
.meter { display: grid; grid-template-columns: 1fr 48px; align-items: center; gap: 10px; }
.meter__bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter__bar i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--fathom)); transition: width .25s; }
.meter__v { font: 400 22px var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.slider { display: grid; grid-template-columns: 170px 1fr 30px; align-items: center; gap: 12px; font: 500 14px var(--sans); }
.slider input { width: 100%; accent-color: var(--fathom); }
.slider output { font: 600 14px var(--sans); text-align: right; font-variant-numeric: tabular-nums; }

/* checklists */
.check { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.check label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 400 15px/1.5 var(--sans); color: #2a2a24; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--fathom); }
.check input:checked + span { color: var(--mute); text-decoration: line-through; }

/* type-vs-talk game (the dictation challenge stall) */
.tvt { display: grid; gap: 14px; }
.tvt__line { margin: 0; padding: 18px 20px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 400 20px/1.5 var(--serif); user-select: none; }
.tvt__line b { background: #cfe8dc; font-weight: 400; border-radius: 4px; }
.tvt__line u { text-decoration-color: var(--flare); text-decoration-thickness: 2px; }
.tvt__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tvt__out .kpi__v { font-size: 30px; }
.board { margin: 0; padding: 0; list-style: none; counter-reset: b; display: grid; gap: 4px; font: 500 14px var(--sans); }
.board li { counter-increment: b; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: #fff; }
.board li::before { content: counter(b); font: 400 18px/1 var(--serif); color: var(--mute); }

/* linkedin dictate-a-post */
.lint { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 400 14px/1.45 var(--sans); }
.lint li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.lint li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #cfe8dc; font: 700 11px/1 var(--sans); color: var(--fathom); }
.lint li.is-bad::before { content: "✕"; background: #ffe0d4; color: var(--flare); }
.post { padding: 20px 22px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 400 15px/1.6 var(--sans); white-space: pre-wrap; }
.post__who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 14px var(--sans); }
.post__av { width: 36px; height: 36px; border-radius: 50%; background: var(--dawn); }

.empty { padding: 28px; border-radius: var(--r); background: var(--lumen); text-align: center; font: 400 15px/1.5 var(--sans); color: var(--mute); }
.note { margin: 12px 0 0; font: 400 13px/1.5 var(--sans); color: var(--mute); }
.lede { margin: 0 0 14px; font: 400 18px/1.55 var(--sans); color: var(--vast); max-width: 62ch; }
.big { font: 400 30px/1.15 var(--serif); letter-spacing: -.01em; }
.quote { margin: 0; padding: 18px 20px; border-radius: var(--r-sm); background: var(--lumen); font: italic 400 20px/1.45 var(--serif); color: var(--vast); }
.quote cite { display: block; margin-top: 8px; font: normal 600 13px var(--sans); color: var(--mute); }

/* the locked state (folder opened by someone who isn't on the team) */
.gos-lock { margin: auto; padding: 40px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.gos-lock img { width: 56px; height: 56px; image-rendering: pixelated; }
.gos-lock p { margin: 0; max-width: 42ch; font: 400 16px/1.55 var(--sans); color: #33332c; }
.gos-lock p.big { max-width: 14ch; font: 400 clamp(44px, 6vw, 72px)/.95 var(--serif); letter-spacing: -.03em; color: var(--vast); }
.gos-lock p.big em, .gos-lock p.big i { font-style: italic; }
.win--gos .win__body:has(.gos-lock) { align-items: center; justify-content: center; }

/* fixes from the first look */
.gos form[hidden], .gos .form[hidden], .win--gos form[hidden] { display: none !important; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fit summary { cursor: pointer; list-style: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fit summary::-webkit-details-marker { display: none; }
.fit[open] summary { display: block; }
.fit p { margin: 8px 0 0; font-size: 13.5px; color: #3c3c34; }
.fit p.muted { color: var(--mute); }
@media (min-width: 761px) {
  .tbl--creators { table-layout: fixed; }
  .tbl--creators th:nth-child(1) { width: 52px; }
  .tbl--creators th:nth-child(2) { width: 24%; }
  .tbl--creators th:nth-child(3) { width: 15%; }
  .tbl--creators th:nth-child(4) { width: 13%; }
  .tbl--creators td { overflow-wrap: break-word; }
}

/* sign-in: an @wispr.ai email, then a 6-digit code */
.gos-signin { width: 100%; max-width: 520px; }
.gos-signin__form { width: 100%; max-width: 440px; display: flex; gap: 10px; margin-top: 10px; }
.gos-signin__form .field { flex: 1; min-width: 0; min-height: 52px; font-size: 16px; }
.gos-signin__form .btn { min-height: 52px; padding: 0 24px; font-size: 16px; }
.gos-signin__code { font: 500 24px/1 var(--sans) !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.gos-signin__msg { min-height: 1.5em; font: 500 14px/1.5 var(--sans); color: var(--pulse); }
.gos-signin__msg:empty { min-height: 0; }
.gos-signin__alt { padding: 6px 0; border: 0; background: none; color: var(--vast); font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* dashboard without numbers: names and methods only */
.kpi__name { font: 400 26px/1.08 var(--serif); letter-spacing: -.01em; color: var(--vast); }
.kpi--north .kpi__name { color: var(--lumen); font-size: clamp(34px, 3.6vw, 48px); line-height: 1; }
.kpi--north .kpi__d b { color: var(--lumen); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 8px; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--sans); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fathom); font: 600 12px/1 var(--sans); color: var(--lumen); }

/* ---- narrow: list, then page (like Work) */
@media (max-width: 760px) {
  .win--gos .win__bar { height: 52px; padding: 0 12px 0 16px; }
  .gos { grid-template-columns: 1fr; }
  .gos__side { border-right: 0; padding: 20px 12px; }
  .gos__hello { font-size: 36px; }
  .gos__main { display: none; padding: 0; }
  .gos.is-page .gos__side { display: none; }
  .gos.is-page .gos__main { display: flex; }
  .gos__back { display: inline-flex; align-items: center; align-self: flex-start; margin: 12px 16px 4px; }
  .gos__navbtn { min-height: 48px; font-size: 16px; }
  .gos__page { padding: 16px 16px 32px; border-radius: 0; box-shadow: none; background: var(--lumen); }
  .gos__title { font-size: 44px; }
  .gos__why { font-size: 15px; }
  .gbox { padding: 18px; }
.win--gos .card { padding: 18px; }
  /* the page is Lumen here, so the cards go white to stay visible */
.gbox, .win--gos .card, .kpi:not(.kpi--north), .empty, .quote { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
  .tl { display: none; }
  .agenda { display: grid; gap: 18px; }
  .agenda__m { margin: 0 0 8px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .agenda__list { display: grid; gap: 8px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 10px; }
  .kpi--north { grid-column: 1 / -1; padding: 24px; }
  .funnel__row { grid-template-columns: 100px 1fr 52px; font-size: 13px; }
  .slider { grid-template-columns: 1fr 30px; }
  .slider span { grid-column: 1 / -1; }
  .brief { padding: 22px 18px; border-radius: var(--r); }
  .tbl { font-size: 14px; }
  .tbl--stack thead { display: none; }
  .tbl--stack tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 14px; border-bottom: 1px solid var(--line); }
  .tbl--stack td { padding: 0; border: 0; }
  .tbl--stack td[data-k]::before { content: attr(data-k) ": "; color: var(--mute); font-weight: 600; }
  .tbl--stack td.tbl__wide { grid-column: 1 / -1; }
  .tbl--stack td.tbl__star { position: absolute; top: 8px; right: 8px; }
  .tbl--stack td.tbl__name { padding-right: 44px; }
  .sel, .star { min-height: 44px; }
  .star { width: 44px; }
  .gtab { min-height: 40px; }
  .tvt__out { grid-template-columns: 1fr 1fr; }
  .tvt__out .kpi:last-child { grid-column: 1 / -1; }
  .tvt .row .field { flex: 1 0 100%; }
  .gos-signin__form { flex-direction: column; }
  .steps { flex-direction: column; align-items: flex-start; }
}

/* sidebar group labels (Plan, Brand, People…) */
.gos__navgroup { margin: 14px 12px 4px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.gos__navgroup:first-child { margin-top: 0; }

/* the work-in-progress note in the sidebar */
.gos-wip { margin: 0 4px; border-radius: 16px; background: #fff0d9; }
.gos-wip summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font: 600 13px var(--sans); cursor: pointer; list-style: none; }
.gos-wip summary::-webkit-details-marker { display: none; }
.gos-wip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 3px rgba(255,169,70,.25); }
.gos-wip__n { margin-left: auto; font-weight: 500; color: #7a4b00; }
.gos-wip__note { margin: 0; padding: 0 12px 8px; font: 400 12.5px/1.45 var(--sans); color: #5a4420; }
.gos-wip__list { margin: 0; padding: 0 6px 8px; list-style: none; display: grid; gap: 2px; }
.gos-wip__list button { width: 100%; display: grid; gap: 4px; justify-items: start; padding: 8px 8px; border: 0; border-radius: 10px; background: none; color: var(--vast); font: 400 12.5px/1.4 var(--sans); text-align: left; cursor: pointer; }
.gos-wip__list button:hover { background: rgba(255,255,255,.6); }
.gos-wip__list .tag { padding: 2px 8px; font-size: 10.5px; background: rgba(255,255,255,.7); }

/* the prototype disclaimer above every module */
.gos-proto { flex: none; margin: 0 0 10px; padding: 10px 16px; border-radius: 14px; background: #fff0d9; font: 400 13px/1.45 var(--sans); color: #5a4420; }
.gos-proto b { font-weight: 600; color: #3d2c10; }
@media (max-width: 760px) { .gos-proto { margin: 4px 16px 0; font-size: 12.5px; } }

/* the nudge on the show's end card (Platinum, like the card it sits in) */
.end__gos { margin-top: 16px; padding-top: 14px; border-top: 1px dashed currentColor; }

/* ================================================================ OS shell: home screen of apps, one bar on top */
.gos.gos--os { display: flex; flex-direction: column; grid-template-columns: none; }
.gos--os .gos__page { flex: 1; min-height: 0; overflow: auto; padding: 32px max(24px, calc((100% - 1080px) / 2)) 56px; border-radius: 0; background: var(--lumen); box-shadow: none; }
.win--gos .win__bar { gap: 14px; }
.gos__top { order: 2; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.gos__sp { flex: 1; }
.gos__homebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--line); color: var(--vast); font: 600 14px var(--sans); cursor: pointer; }
.gos__homebtn:hover { background: var(--vast); color: var(--lumen); }
.gos__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/1 var(--serif); color: var(--vast); }
.gos__where:empty { display: none; }
.gos__top.is-home .gos__homebtn { display: none; }
/* account menu */
.gos__menu { position: relative; }
.gos__menu summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dawn); font: 600 14px var(--sans); cursor: pointer; list-style: none; }
.gos__menu summary::-webkit-details-marker { display: none; }
.gos__menupop { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 200px; padding: 8px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(26,26,26,.35); display: grid; gap: 2px; }
.gos__menupop p { margin: 4px 10px 6px; font: 400 13px var(--sans); color: var(--mute); }
.gos__menupop button { min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--vast); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.gos__menupop button:hover { background: var(--line); }
/* the work-in-progress note becomes a pill with a dropdown */
.gos__top .gos-wip { position: relative; margin: 0; background: none; }
.gos__top .gos-wip summary { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff0d9; font-size: 13px; }
.gos__top .gos-wip__n { margin-left: 6px; }
.gos__top .gos-wip[open] > :not(summary) { position: relative; }
.gos__top .gos-wip[open]::after { content: none; }
.gos__top .gos-wip__note, .gos__top .gos-wip__list { display: none; }
.gos__top .gos-wip[open] .gos-wip__pop { display: grid; }
.gos-wip__pop { display: none; position: absolute; right: 0; top: 44px; z-index: 30; width: min(360px, calc(100vw - 24px)); padding: 8px; border-radius: 16px; background: #fff7ea; box-shadow: 0 0 0 1px #f1dfbf, 0 18px 40px -16px rgba(26,26,26,.35); gap: 4px; }
.gos-wip__pop .gos-wip__note, .gos-wip__pop .gos-wip__list { display: grid; }
.gos-wip__pop .gos-wip__note { display: block; padding: 6px 8px 4px; }

/* home screen */
.ghome__head { margin-bottom: 28px; }
.ghome__hi { margin: 0; font: 400 clamp(48px, 6vw, 76px)/.95 var(--serif); letter-spacing: -.03em; }
.ghome__sub { margin: 10px 0 16px; font: 400 18px/1.45 var(--sans); color: #33332c; }
.ghome .gos-proto { display: inline-block; margin: 0; max-width: 640px; }
.ghome__start { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 34px; }
.ghome__group { margin-bottom: 30px; }
.ghome__g { margin: 0 0 12px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ghome__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gapp { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 76px; padding: 12px 16px 12px 12px; border: 0; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--vast); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.gapp:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 12px 28px -16px rgba(26,26,26,.35); }
.gapp__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--c, var(--fathom)); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.gapp__ic svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.gapp__t { align-self: end; display: flex; align-items: baseline; gap: 8px; font: 600 15px/1.2 var(--sans); }
.gapp__n { font: 500 12px var(--sans); color: var(--mute); font-variant-numeric: tabular-nums; }
.gapp__b { align-self: start; margin-top: 2px; font: 400 13px/1.35 var(--sans); color: var(--mute); }
.gapp--big { grid-template-columns: 64px 1fr; min-height: 100px; padding: 18px 20px 18px 18px; border-radius: 24px; background: var(--vast); box-shadow: none; color: var(--lumen); }
.gapp--big .gapp__ic { width: 64px; height: 64px; border-radius: 18px; background: var(--dawn); color: var(--vast); }
.gapp--big .gapp__t { font: 400 28px/1 var(--serif); }
.gapp--big .gapp__b { color: #cfcfbd; font-size: 14px; }
.gapp--big + .gapp--big { background: var(--fathom); }
.gapp--big + .gapp--big .gapp__ic { background: var(--lumen); color: var(--fathom); }
/* light tiles keep a readable glyph on the paler Wispr colours */
.gapp__ic[style*="--lime"], .gapp__ic[style*="--grape"], .gapp__ic[style*="--plat"], .gapp__ic[style*="--line"], .gapp__ic[style*="--dawn"], .gapp__ic[style*="--signal"], .gapp__ic[style*="--glow"], .gapp__ic[style*="--tangerine"] { color: var(--vast); }

/* an app's header: name, one line, the rest folded */
.gos--os .gos__head { margin-bottom: 22px; }
.gos--os .gos__title { font-size: clamp(36px, 4vw, 52px); }
.gos--os .gos__why { margin-top: 10px; font-size: 16px; color: #33332c; }
.gos__about { margin-top: 8px; max-width: 62ch; }
.gos__about summary { display: inline-flex; min-height: 32px; align-items: center; font: 600 13px var(--sans); color: var(--fathom); cursor: pointer; list-style: none; }
.gos__about summary::-webkit-details-marker { display: none; }
.gos__about summary::after { content: "+"; margin-left: 6px; }
.gos__about[open] summary::after { content: "–"; }
.gos__about p { margin: 4px 0 0; font: 400 15px/1.55 var(--sans); color: #33332c; }

@media (max-width: 760px) {
  .gos--os .gos__page { padding: 20px 16px 40px; }
  .win--gos .win__bar { gap: 8px; padding: 0 10px; }
  .win--gos:has(.gos--os.is-app) .win__title { font-size: 0; gap: 0; }
  .gos__homebtn span { display: none; }
  .gos__homebtn { width: 36px; padding: 0; justify-content: center; }
  .gos__where { font-size: 18px; }
  .gos__top .gos-wip summary { padding: 0 12px; }
  .gos__top .gos-wip summary > span:not(.gos-wip__dot):not(.gos-wip__n) { display: none; }
  .ghome__hi { font-size: 48px; }
  .ghome__sub { font-size: 16px; }
  /* a phone home screen: icons in a grid, names under them */
  .ghome__grid { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
  .ghome__grid .gapp { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; min-height: 0; padding: 0; background: none; box-shadow: none; text-align: center; }
  .ghome__grid .gapp:hover { transform: none; box-shadow: none; }
  .ghome__grid .gapp__ic { grid-row: auto; width: 60px; height: 60px; border-radius: 17px; }
  .ghome__grid .gapp__t { margin-top: 6px; justify-content: center; font: 500 11.5px/1.2 var(--sans); }
  .ghome__grid .gapp__n, .ghome__grid .gapp__b { display: none; }
  .ghome__start { grid-template-columns: 1fr; }
}
.gos__top .gos-wip summary { white-space: nowrap; }

/* campaigns board: a column per stage, a picture on every card */
.cboard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.cboard__col { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s; }
.cboard__col.is-over { background: #f6efff; }
.cboard__h { display: flex; justify-content: space-between; margin: 4px 6px 2px; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.cboard__empty { margin: 6px; padding: 18px 10px; border: 1.5px dashed var(--line); border-radius: 14px; text-align: center; font: 400 13px var(--sans); color: var(--mute); }
.ccard { display: grid; gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(26,26,26,.06), inset 0 0 0 1px var(--line); color: var(--vast); text-align: left; cursor: grab; transition: transform .15s, box-shadow .15s; }
.ccard:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(26,26,26,.35), inset 0 0 0 1px var(--line); }
.ccard .gart { border-radius: 0; }
.ccard__swatch { display: block; height: 8px; background: var(--c); }
.ccard__b { display: grid; gap: 4px; padding: 12px 14px 14px; border-top: 4px solid var(--c, var(--fathom)); }
.ccard__t { font: 400 21px/1.1 var(--serif); }
.ccard__p { font: 400 13px/1.4 var(--sans); color: #45453c; }
.ccard__m { margin-top: 2px; font: 500 12px var(--sans); color: var(--mute); }
.brief__line { margin: 8px 0 0; max-width: 60ch; font: 400 16px/1.5 var(--sans); color: #e4e4d0; }
.tag--planned { background: #e9dcff; }
@media (max-width: 760px) {
  .cboard { grid-template-columns: repeat(4, 78vw); scroll-snap-type: x mandatory; }
  .cboard__col { scroll-snap-align: start; }
}
/* Start here: the season's campaigns as a strip of pictures */
.home-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; margin: 6px 0 22px; padding-bottom: 6px; }
.home-strip .ccard__t { font-size: 18px; }
@media (max-width: 760px) { .home-strip { grid-auto-columns: 62vw; } }
/* a people kanban (creators pipeline) */
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kb__col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.kb__card { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.kb__t { display: grid; min-width: 0; font: 400 13px/1.3 var(--sans); color: var(--mute); }
.kb__t b { font-weight: 600; color: var(--vast); overflow-wrap: anywhere; }
.kb__mv { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.kb__mv button { width: 34px; height: 30px; border: 0; border-radius: 999px; background: var(--line); color: var(--vast); font: 600 14px var(--sans); cursor: pointer; }
.kb__mv button:hover { background: var(--vast); color: var(--lumen); }
@media (max-width: 760px) { .kb { grid-auto-columns: 78vw; } }
/* creators: a grid of faces */
.crgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.crcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.crcard__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.crcard__n { margin: 0; font: 400 21px/1.1 var(--serif); }
.crcard__m { margin: 0; font: 500 12.5px var(--sans); color: var(--mute); }
.crcard .fit summary { font: 400 13.5px/1.45 var(--sans); color: #3c3c34; }
.crcard .tags:empty { display: none; }
.cgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ccard[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--vast); }

/* ================================================================ structure: a rail of eight sections, tabs inside each */
.gos.gos--os { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.gos__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.grail { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--paper); }
.grail__b { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: #45453c; font: 500 14.5px var(--sans); text-align: left; cursor: pointer; }
.grail__b:hover { background: var(--line); color: var(--vast); }
.grail__b[aria-current="true"] { background: var(--vast); color: var(--lumen); }
.grail__ic { display: grid; place-items: center; flex: none; }
.grail__b:first-child { margin-bottom: 10px; }
/* the prototype line: on every page, never dismissable */
.gos-proto--bar { flex: none; margin: 0; padding: 9px max(24px, calc((100% - 1080px) / 2)); border-radius: 0; border-bottom: 1px solid #f1dfbf; font-size: 13px; }
/* a section: its name, its tabs, then the open module (whose own big title steps aside) */
.gsec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 26px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.gsec-head__t { margin: 0 0 14px; font: 400 clamp(38px, 4vw, 54px)/.95 var(--serif); letter-spacing: -.03em; color: var(--vast); }
.gsec-tabs { margin: 0 0 -1px; padding: 0; gap: 22px; border-radius: 0; background: none; }
.gsec-tabs .gtab { min-height: 42px; padding: 0 2px; border-radius: 0; border-bottom: 2px solid transparent; background: none; color: var(--mute); font-weight: 500; }
.gsec-tabs .gtab:hover { color: var(--vast); }
.gsec-tabs .gtab[aria-selected="true"] { background: none; box-shadow: none; border-bottom-color: var(--vast); color: var(--vast); font-weight: 600; }
.gsec-body .gos__title { display: none; }
.gsec-body .gos__head { margin-bottom: 20px; }
.gsec-body .gos__why { margin-top: 0; }
/* home: the eight sections as picture cards */
.gsecs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 34px; }
.gsec { display: grid; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--vast); text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.gsec:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -16px rgba(26,26,26,.35); }
.gsec .gart { border-radius: 0; }
.gsec__b { display: grid; gap: 5px; padding: 14px 16px 16px; }
.gsec__t { font: 400 26px/1 var(--serif); }
.gsec__l { font: 400 14px/1.4 var(--sans); color: #45453c; }
.gsec__tabs { margin-top: 4px; font: 500 12px/1.4 var(--sans); color: var(--mute); }
@media (max-width: 760px) {
  .gos.gos--os { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .grail { flex-direction: row; gap: 4px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .grail::-webkit-scrollbar { display: none; }
  .grail__b { flex: none; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; }
  .grail__b:first-child { margin-bottom: 0; }
  .grail__b:first-child span:last-child { display: none; }
  .gos-proto--bar { padding: 8px 16px; font-size: 12px; }
  .gsec-head { margin-bottom: 18px; }
  .gsec-head__t { font-size: 38px; margin-bottom: 10px; }
  .gsec-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .gsecs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gsec__t { font-size: 20px; }
  .gsec__l { font-size: 12.5px; }
  .gsec__tabs { display: none; }
}