/*
  Ounce product page.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Sits on top of site.css and borrows its tokens. The app's own icon is blue, so
  the page keeps the studio's orange as the brand accent and lets a cool blue do
  the atmospheric work: hero glow, the "before and after" figures, the entitlement
  block. That way the page reads as Ounce without the site changing identity.
*/

.ounce { --app: #5b8cff; --app-2: #7ea6ff; }

/* ---- hero ---- */
.oh { position: relative; padding: clamp(8rem, 16vw, 11rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; }
.oh::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(91,140,255,.22), transparent 70%);
  filter: blur(20px);
}
.oh > .wrap { position: relative; z-index: 1; }
.oh__icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 1.6rem;
  box-shadow: 0 24px 60px -20px rgba(91,140,255,.55); }
.oh h1 { max-width: 15ch; }
.oh__lede { margin: 1.5rem 0 1rem; max-width: 46ch; font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--ink-soft); }
.oh__drag { margin: 0 0 2rem; color: var(--muted); font-size: 1rem; }
.oh__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; }
.oh__price { color: var(--muted); font-size: .95rem; }
.oh__price b { color: var(--ink); font-weight: 700; }

.prob__note { margin-top: 1.2rem; font-size: .92rem; color: var(--muted); }

/* ---- numbers ---- */
.nums { display: grid; gap: 1.2rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .nums { grid-template-columns: repeat(3, 1fr); } }
.num { border-left: 2px solid var(--app); padding-left: 1.1rem; }
.num b { display: block; font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.num span { font-size: .9rem; color: var(--muted); }

/* ---- formats table ---- */
.formats { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .98rem; }
.formats th, .formats td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.formats th { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.formats td:first-child { white-space: nowrap; font-weight: 650; color: var(--ink); }
.formats td:last-child { color: var(--ink-soft); }
.formats tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.chips span { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; color: var(--ink-soft); }

/* ---- privacy / entitlements ---- */
.ents {
  margin-top: 1.8rem; padding: 1.4rem 1.5rem; border-radius: var(--radius);
  border: 1px solid rgba(91,140,255,.28); background: rgba(91,140,255,.06);
  font-family: var(--mono); font-size: .86rem; color: var(--ink-soft);
  display: grid; gap: .55rem; overflow-x: auto;
}
.ents code { white-space: nowrap; }
.ents .none { color: #ff9a9a; }

/* ---- pricing ---- */
.price {
  text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: radial-gradient(120% 140% at 50% 0%, var(--panel-2), var(--panel) 45%, var(--bg));
}
.price__big { font-size: clamp(3rem, 9vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price__once { display: block; margin-top: .6rem; font-size: 1.1rem; color: var(--muted); }
.price p { max-width: 48ch; margin-inline: auto; color: var(--ink-soft); }
.price .btn { margin-top: 1.8rem; }

/* ---- legal pages ---- */
.legalpage { padding: clamp(7rem, 14vw, 10rem) 0 clamp(4rem, 9vw, 6rem); }
.legalpage .wrap { max-width: 720px; }
.legalpage h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.legalpage h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2.8rem; }
.legalpage h3 { font-size: 1.05rem; margin-top: 1.8rem; color: var(--ink); }
.legalpage p, .legalpage li { color: var(--ink-soft); }
.legalpage ul { padding-left: 1.2rem; display: grid; gap: .6rem; }
.legalpage__meta { color: var(--muted); font-size: .9rem; }
.legalpage dl { display: grid; gap: .5rem; margin: 1.2rem 0; }
.legalpage dt { font-weight: 650; color: var(--ink); font-size: .92rem; }
.legalpage dd { margin: 0 0 .6rem; color: var(--ink-soft); }
.legalpage .short {
  border-left: 2px solid var(--app); padding: .2rem 0 .2rem 1.2rem; margin: 1.5rem 0;
}

/* the pulled-out summary was running its two paragraphs into one block of text */
.legalpage .short p { margin: 0 0 .9rem; }
.legalpage .short p:last-child { margin-bottom: 0; }

/* ============================================================================
   FEATURES IN TWO REGISTERS
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   The plain reading leads. The technical line sits under it, quieter, and can be
   switched off entirely. Both are always in the markup: `tech-off` is only ever
   set by script, so a visitor without it sees everything.
   ========================================================================= */
.section--alt { background: linear-gradient(180deg, transparent, var(--panel) 18%, var(--panel) 82%, transparent); }

.specs {
  list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 720px;
}
.specs li { border-top: 1px solid var(--line); padding-top: .9rem; }
.specs b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.specs span { font-size: .82rem; color: var(--muted); }

.regswitch { display: flex; justify-content: flex-end; margin-block: -1rem 0; }
.regswitch[hidden] { display: none; }
.regswitch__btn {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted);
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.02); transition: color .2s var(--ease), border-color .2s var(--ease);
}
.regswitch__btn:hover { color: var(--ink); border-color: var(--app); }
.regswitch__btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.regswitch__dot {
  width: 26px; height: 15px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .25s var(--ease);
}
.regswitch__dot::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease), background .25s var(--ease);
}
.regswitch__btn[aria-pressed="true"] .regswitch__dot { background: rgba(91,140,255,.35); }
.regswitch__btn[aria-pressed="true"] .regswitch__dot::after { transform: translateX(11px); background: var(--app-2); }

.regs { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 56rem) { .regs { grid-template-columns: 1fr 1fr; } }
.reg {
  padding: 1.5rem 1.5rem 1.4rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg));
  transition: border-color .35s var(--ease);
}
.reg:hover { border-color: rgba(91,140,255,.35); }
.reg__plain { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
.reg__tech {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--line);
  font-size: .84rem; line-height: 1.6; color: var(--muted);
}
.reg__tech span {
  display: inline-block; margin-right: .5rem; padding: .1rem .45rem; border-radius: 5px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--app-2); background: rgba(91,140,255,.12); vertical-align: 1px;
}
.js.tech-off .reg__tech { display: none; }

/* ---------------------------------------------------------------------------
   The three settings, and the dialog screenshot.

   The first cut put these small screenshots into a half width column, where
   they stacked into a tall cascade with acres of empty page beside them, and
   the crops still carried a rim of desktop wallpaper. Both are fixed: the
   panels are now cropped to themselves with the corners masked into the pixels,
   so there is no rim to show, and they are laid out as a proper row with the
   labels set as real text rather than captured in the image.
   ------------------------------------------------------------------------ */
.settings__head { max-width: 62ch; }
.settings__head .lede { margin: 0 0 1rem; }

.menus {
  list-style: none; margin: 3.5rem 0 0; padding: 0;
  display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); align-items: start;
  justify-items: center;
}
@media (max-width: 52rem) { .menus { grid-template-columns: 1fr; gap: 2.5rem; } }
.menus__label {
  display: block; margin-bottom: 1rem; text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
/* alpha-masked corners, so a border would cut across them: the shadow follows
   the shape instead */
.menus img {
  width: auto; max-width: 100%; height: auto;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.75));
}

/* A screenshot presented as evidence, set beside the words it supports rather
   than stranded in the middle of the section. */
.sechead--fig { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .sechead--fig { grid-template-columns: 1fr auto; } }
.shot { margin: 0; text-align: center; }
.shot img {
  width: 100%; max-width: 340px; height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.8));
}
.shot figcaption { margin-top: .9rem; font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------------------
   THE PROBE, DRAWN
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   ------------------------------------------------------------------------ */
.probe { margin: 3.5rem 0 0; }
.probe__stage { position: relative; padding-bottom: 3.4rem; }
.probe__stage svg { width: 100%; height: clamp(70px, 9vw, 110px); overflow: visible; }
.probe__track { fill: var(--panel-2); }
.probe__slice { fill: var(--app); filter: drop-shadow(0 0 14px rgba(91,140,255,.65)); }
.probe__scan { stroke: var(--orange); stroke-width: 3; opacity: 0; }

.probe__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: auto 0 0; height: 3rem; }
.probe__marks li {
  position: absolute; left: var(--at); transform: translateX(-50%);
  text-align: center; line-height: 1.2;
}
.probe__marks b { display: block; font-size: .92rem; font-weight: 700; color: var(--app-2); font-variant-numeric: tabular-nums; }
.probe__marks span { font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.probe__flow { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 56rem) { .probe__flow { grid-template-columns: repeat(4, 1fr); } }
.probe__step {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: .8rem; align-items: start;
  padding: 1.1rem 1.1rem 1.1rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg));
  font-size: .93rem; color: var(--ink-soft);
}
.probe__step b {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font-size: .85rem; font-weight: 800; color: var(--app-2); background: rgba(91,140,255,.14);
}
.probe__step--no  b { color: #ff8b8b; background: rgba(255,107,107,.14); }
.probe__step--yes b { color: #6fdca0; background: rgba(111,220,160,.14); }
.probe figcaption { margin-top: 1.6rem; font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------------------
   ONE REAL RUN
   Bars are sized in the markup from the real megabytes, so the chart is correct
   before any script runs. The script only plays them shrinking.
   ------------------------------------------------------------------------ */
.run__total { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; }
.run__total b {
  font-size: clamp(3rem, 9vw, 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--app-2), #b9cdff 55%, #ffd0b8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.run__total span { font-size: .98rem; color: var(--muted); max-width: 30ch; }

.bars { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.bar {
  display: grid; align-items: center; gap: .5rem 1rem;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem 7rem;
}
.bar__from, .bar__to { font-size: .88rem; font-variant-numeric: tabular-nums; }
.bar__from { color: var(--muted); text-align: right; }
.bar__to { color: var(--ink); font-weight: 650; }
.bar__track {
  display: block; height: 16px; border-radius: 999px; position: relative;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
}
.bar__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--app), var(--app-2));
  box-shadow: 0 0 18px rgba(91,140,255,.45);
}
.bar__cut { font-size: .82rem; font-weight: 700; color: #6fdca0; }
@media (max-width: 46rem) {
  .bar { grid-template-columns: 4.6rem 1fr; grid-template-areas: "from track" "to cut"; }
  .bar__from { grid-area: from; } .bar__track { grid-area: track; }
  .bar__to { grid-area: to; text-align: right; } .bar__cut { grid-area: cut; }
}
.run__note { margin: 2rem 0 0; font-size: .92rem; color: var(--muted); max-width: 62ch; }
.run__shot { margin: 3rem 0 0; }
.run__shot img {
  width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------------------
   AMBIENT MOTION
   The page should not be inert when nobody is scrolling. Three blurred blobs
   drift behind the hero on long, offset cycles so the loop never reads as a
   loop, the icon breathes, and the probe re-scans every so often. All of it is
   decorative, sits behind the content, and stops dead for reduced motion.
   ------------------------------------------------------------------------ */
.oh__aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.oh__aura span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); will-change: transform;
}
.oh__aura span:nth-child(1) {
  width: 46vw; height: 46vw; left: -6vw; top: -14vw;
  background: radial-gradient(circle, rgba(91,140,255,.34), transparent 68%);
  animation: aura-a 19s ease-in-out infinite alternate;
}
.oh__aura span:nth-child(2) {
  width: 40vw; height: 40vw; right: -8vw; top: -6vw;
  background: radial-gradient(circle, rgba(255,122,70,.24), transparent 68%);
  animation: aura-b 23s ease-in-out infinite alternate;
}
.oh__aura span:nth-child(3) {
  width: 34vw; height: 34vw; left: 34vw; top: 12vw;
  background: radial-gradient(circle, rgba(126,166,255,.20), transparent 70%);
  animation: aura-c 31s ease-in-out infinite alternate;
}
@keyframes aura-a { to { transform: translate3d(9vw, 5vw, 0) scale(1.16); } }
@keyframes aura-b { to { transform: translate3d(-7vw, 7vw, 0) scale(1.1); } }
@keyframes aura-c { to { transform: translate3d(4vw, -5vw, 0) scale(.88); } }

.oh__icon { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
  .oh__aura span, .oh__icon { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   THE DEMO
   ------------------------------------------------------------------------ */
.demo__frame { margin: 3rem 0 0; position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); background: #000; }
.demo__video { display: block; width: 100%; height: auto; }
.demo__why { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3.5rem; align-items: start; }
@media (min-width: 62rem) { .demo__why { grid-template-columns: 1fr 1fr; } }
.demo__why h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: .8rem; }
.demo__why p { color: var(--ink-soft); margin: 0 0 1.1rem; }
.demo__why p:last-child { margin-bottom: 0; }
.demo__why em { font-style: italic; color: var(--ink); }
.demo__why .regs { margin: 0; grid-template-columns: 1fr; }

/* ---------------------------------------------------------------------------
   THE PROBLEM, AS A COMPARISON
   Two bare figures with an arrow between them read, on this page of all pages,
   as Ounce making the file bigger. Each row now names whose result it is, and
   Ounce's answer to the same file sits directly underneath.
   ------------------------------------------------------------------------ */
.vs { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 60rem) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__row {
  padding: 1.7rem 1.7rem 1.5rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg));
}
.vs__row--bad  { border-color: rgba(255,107,107,.30); }
.vs__row--good { border-color: rgba(111,220,160,.30); }
.vs__who {
  margin: 0 0 1.3rem; font-size: .74rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.vs__row--good .vs__who { color: var(--app-2); }
.vs__bars { display: grid; gap: .85rem; }
/* The label column is fixed, not auto. With auto, a longer label stole width
   from its own bar, so two bars showing the SAME 2.76 MB came out 268px and
   228px and the chart quietly misrepresented its own numbers. Every bar now
   measures against an identical track. */
.vs__bar { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; gap: 1rem; align-items: center; }
.vs__len { display: block; height: 26px; border-radius: 8px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.vs__len i { display: block; height: 100%; border-radius: 8px; background: rgba(183,187,200,.30); }
.vs__len--bad  i { background: linear-gradient(90deg, #ff6b6b, #ff9a9a); box-shadow: 0 0 18px rgba(255,107,107,.4); }
.vs__len--good i { background: linear-gradient(90deg, #4fbf86, #6fdca0); box-shadow: 0 0 18px rgba(111,220,160,.35); }
.vs__lbl { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vs__verdict { margin: 1.3rem 0 0; font-size: .95rem; font-weight: 650; }
.vs__verdict--bad  { color: #ff8b8b; }
.vs__verdict--good { color: #6fdca0; }

@media (max-width: 30rem) {
  .vs__bar { grid-template-columns: 1fr; gap: .35rem; }
  .vs__lbl { font-size: .8rem; }
}

/* The play affordance over the poster. Revealed by script only: with no script
   the video's own controls sit over the same poster and do the same job. */
.demo__play {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(180deg, rgba(13,13,26,.25), rgba(13,13,26,.65));
  font: inherit; color: var(--ink); transition: background .3s var(--ease);
}
.demo__play[hidden] { display: none; }
.demo__play:hover { background: linear-gradient(180deg, rgba(13,13,26,.15), rgba(13,13,26,.55)); }
.demo__play:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
.demo__playicon {
  width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  box-shadow: 0 14px 40px -8px var(--orange-deep);
  position: relative; transition: transform .3s var(--ease);
}
.demo__playicon::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-left: 20px solid #1a0d06; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.demo__play:hover .demo__playicon { transform: scale(1.07); }
.demo__playtxt { text-align: left; font-weight: 700; font-size: 1.05rem; }
.demo__playtxt em { display: block; font-style: normal; font-weight: 400; font-size: .85rem; color: var(--muted); margin-top: .15rem; }
.demo__disclosure { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 34rem) { .demo__playtxt { display: none; } }

/* ---------------------------------------------------------------------------
   WHY THERE IS ANYTHING LEFT TO TAKE
   Two columns set against each other: the constraint the phone is under, and
   the freedom Ounce has instead. Not a comparison with another product, a
   comparison between recording something and revisiting it.
   ------------------------------------------------------------------------ */
.why { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 3rem; }
@media (min-width: 56rem) { .why { grid-template-columns: 1fr 1fr; } }
.why__col {
  padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
}
.why__col:last-child { border-color: rgba(91,140,255,.28); }
.why__col h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.why__col p { color: var(--ink-soft); margin: 0 0 1rem; font-size: .98rem; }
.why__col p:last-child { margin-bottom: 0; }
.why__col em { font-style: italic; color: var(--ink); }

.proof {
  margin: 2.5rem 0 0; padding: 1.3rem 1.5rem; border-radius: var(--radius);
  border: 1px solid rgba(111,220,160,.28); background: rgba(111,220,160,.06);
  font-size: 1.02rem; color: var(--ink-soft); max-width: 68ch;
}
.proof b { color: var(--ink); font-weight: 750; }

/* ---------------------------------------------------------------------------
   BLOCKS FOR THE REWRITTEN PAGE (client copy, 2026-08-31)
   ------------------------------------------------------------------------ */
.menus__note { margin: 1rem auto 0; max-width: 26ch; font-size: .9rem; color: var(--ink-soft); text-align: center; }

.dots { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.dots li { display: grid; grid-template-columns: .9rem 1fr; gap: .7rem; align-items: baseline; color: var(--ink); font-size: .98rem; }
.dots li::before { content: "•"; color: var(--app-2); }

/* the guarantees: six short pieces, so they read as a set rather than a wall */
.guards { display: grid; gap: 1.1rem; margin-top: 3rem; }
@media (min-width: 52rem) { .guards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 78rem) { .guards { grid-template-columns: repeat(3, 1fr); } }
.guard {
  padding: 1.7rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.guard:hover { border-color: rgba(91,140,255,.32); transform: translateY(-3px); }
.guard h3 { font-size: 1.08rem; margin-bottom: .7rem; }
.guard p { margin: 0 0 .9rem; font-size: .95rem; color: var(--ink-soft); }
.guard p:last-child { margin-bottom: 0; }
.guard b { color: var(--ink); font-weight: 700; }

/* the four outputs */
.fmts { display: grid; gap: 1.1rem; margin-top: 3rem; }
@media (min-width: 46rem) { .fmts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 80rem) { .fmts { grid-template-columns: repeat(4, 1fr); } }
.fmt {
  padding: 1.7rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--bg) 70%);
}
.fmt:first-child { border-color: rgba(91,140,255,.34); }
.fmt__tag {
  margin: 0 0 .8rem; font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.fmt:first-child .fmt__tag { color: var(--app-2); }
.fmt h3 { font-size: 1.2rem; margin-bottom: .6rem; letter-spacing: -0.01em; }
.fmt p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

.price__req { margin: 1.6rem 0 0; font-size: .85rem; color: var(--muted); }
.price .chips span { font-size: .82rem; }