/* ============================================================
   OCCASION ORDER FLOW
   One scrolling form. Mobile is the primary target: every
   control clears 44px, nothing under 12.5px, summary rides
   the bottom of the screen until the form is done.

   Loaded after tokens.css, craft.css and home.css — this file
   holds ONLY the rules the form itself needs. Header, footer,
   buttons and the floating WhatsApp button all come from
   home.css; --paper/--paper-2/--nav-h/--pad/--ink/--hair/--out/
   --draw/--t-press/--t-hover/--t-enter are consumed here, never
   redefined here.
   ============================================================ */

.order-page{background:var(--paper)}
.owrap{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}

/* ── Page head ── */
.ohead{background:var(--ink);color:var(--rimal);padding-block:calc(var(--nav-h) + clamp(30px,5vw,58px)) clamp(30px,4.5vw,52px)}
.crumbs{font-size:12.5px;color:rgba(255,228,196,.6);display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.crumbs a{color:rgba(255,228,196,.82);min-height:44px;display:inline-flex;align-items:center}
.crumbs{align-items:center}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--rimal)}}
.ohead-h{font-weight:200;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.03em;line-height:1.06}
html[lang="ar"] .ohead-h{font-weight:300;letter-spacing:0;line-height:1.3}
.ohead-p{margin-top:16px;max-width:56ch;color:rgba(255,228,196,.78);font-weight:300;
  font-size:clamp(15px,1.2vw,18px);line-height:1.7}
.otrust{list-style:none;padding:0;margin:clamp(22px,3vw,34px) 0 0;display:flex;flex-wrap:wrap;gap:10px 26px}
.otrust li{font-size:13.5px;color:rgba(255,228,196,.72);padding-inline-start:20px;position:relative}
.otrust li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:9px;height:1px;background:rgba(255,228,196,.6)}

/* ── Layout ── */
.olayout{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:clamp(24px,3.4vw,58px);
  padding-block:clamp(32px,5vw,66px) clamp(90px,12vw,130px);align-items:start}
@media(max-width:1000px){.olayout{grid-template-columns:1fr}}
.ocol{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair)}

/* ── A step ── */
.ostep{background:var(--paper-2);padding:clamp(24px,3vw,42px) clamp(20px,2.4vw,38px);
  scroll-margin-top:calc(var(--nav-h) + 44px)}
.ost-h{display:flex;align-items:center;gap:0;font-weight:400;
  font-size:clamp(18px,1.8vw,25px);letter-spacing:-.018em}
html[lang="ar"] .ost-h{letter-spacing:0}
.ost-d{margin-top:10px;color:var(--t80);font-size:14.5px;line-height:1.68;font-weight:300;max-width:62ch}

/* ── Big two-up picker (majlis) ── */
.bigpicks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:560px){.bigpicks{grid-template-columns:1fr}}
.bigpick{min-height:68px;border:1px solid var(--surface-line);background:var(--surface);color:var(--t100);
  font-size:clamp(15px,1.4vw,18px);font-weight:400;display:flex;align-items:center;
  padding-inline:22px;text-align:start;position:relative;overflow:hidden;isolation:isolate;
  touch-action:manipulation;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover) var(--out)}
.bigpick::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ghaf);
  transform:translateY(101%);transition:transform var(--t-enter) var(--out)}
@media (hover:hover) and (pointer:fine){.bigpick:hover{border-color:var(--ghaf)}}
.bigpick:active{transform:scale(.98)}
.bigpick.is-on{color:var(--rimal);border-color:var(--ghaf)}
.bigpick.is-on::before{transform:none}

/* ── Chips (occasion type) ── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{min-height:44px;padding:0 18px;border:1px solid var(--surface-line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--t80);font-size:14.5px;touch-action:manipulation;
  transition:background var(--t-hover) var(--out),color var(--t-hover) var(--out),border-color var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--ghaf);color:var(--ghaf)}}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--ghaf-tint);border-color:var(--ghaf);color:var(--ghaf);font-weight:500}
.chip.is-on::after{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--r-round);
  background:var(--ghaf);margin-inline-start:8px;vertical-align:middle}

/* ── Tier cards ──
   Alignment: .tiercards is the grid that owns 5 named row tracks (name,
   guests, price, contents, staff). Each .tiercard spans all 5 as a
   subgrid, so every row's height is shared across the five cards — the
   tallest .tc-s (Liwan, which wraps to two lines) sets row 5's height for
   everyone, and row 5's TOP edge (the hairline above .tc-s) lands at the
   same y in every card regardless of how any one card's text wraps.
   Scoped to the 5-across layout; below 1140px cards wrap into uneven
   rows (3+2, 2+2+1) where this technique does not apply cleanly, so
   .tiercard falls back to the plain flex column it used before. */
.tiercards{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,auto);gap:10px;margin-top:22px}
@media(max-width:1140px){.tiercards{grid-template-columns:repeat(3,1fr);grid-template-rows:none}}
@media(max-width:640px){.tiercards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.tiercards{grid-template-columns:1fr}}
.tiercard{position:relative;display:grid;grid-template-rows:subgrid;grid-row:1 / span 5;
  gap:5px;text-align:start;padding:18px 16px 24px;border:1px solid var(--surface-line);background:var(--surface);
  color:var(--t100);min-height:172px;overflow:hidden;isolation:isolate;touch-action:manipulation;
  transition:border-color var(--t-hover) var(--out),background var(--t-hover) var(--out),color var(--t-hover) var(--out)}
@media(max-width:1140px){.tiercard{display:flex;flex-direction:column;grid-row:auto}}
@media (hover:hover) and (pointer:fine){.tiercard:hover{border-color:var(--ghaf)}}
.tiercard:active{transform:scale(.98)}

/* Entrance: a Ghaf hairline draws across the top of each card as the row
   enters, staggered 60ms apart — the same idea as home.css's .rung::after. */
.tiercard::before{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;background:var(--ghaf);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 620ms var(--draw);
  transition-delay:calc(var(--i,0) * 60ms)}
[dir="rtl"] .tiercard::before{transform-origin:100% 50%}
.tiercards.on .tiercard::before{transform:scaleX(1)}
.tiercard:nth-child(1){--i:0}.tiercard:nth-child(2){--i:1}.tiercard:nth-child(3){--i:2}
.tiercard:nth-child(4){--i:3}.tiercard:nth-child(5){--i:4}
@media(prefers-reduced-motion:reduce){.tiercard::before{transform:scaleX(1);transition:none}}

/* Selected: a Ghaf border, a light Ghaf wash, the price in Ghaf, and a
   round check marker in the corner — not a full Ghaf flood. */
.tiercard.is-on{background:var(--ghaf-tint);border-color:var(--ghaf);color:var(--t100)}
.tiercard.is-on::after{content:"✓";position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;
  border-radius:var(--r-round);background:var(--ghaf);color:var(--rimal);
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;font-weight:700}

.tc-n{font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.01em;color:var(--ghaf)}
html[lang="ar"] .tc-n{font-size:clamp(17px,1.6vw,20px);letter-spacing:0;font-weight:500}
.tc-fit{position:absolute;top:14px;inset-inline-end:14px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ghaf);border:1px solid currentColor;padding:2px 7px}
html[lang="ar"] .tc-fit{letter-spacing:.03em;text-transform:none;font-size:12px}
.tiercard.is-on .tc-fit{color:var(--ghaf)}
.tc-g{font-size:12px;color:var(--t60)}
.tiercard.is-on .tc-g{color:var(--t80)}
.tc-p{font-size:clamp(20px,1.8vw,26px);font-weight:200;letter-spacing:-.03em;
  color:var(--ghaf);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.tc-p small{font-size:11px;letter-spacing:.1em;color:var(--t60)}
.tiercard.is-on .tc-p small{color:var(--t80)}
.tc-d,.tc-s{font-size:12px;color:var(--t60);line-height:1.5}
.tc-s{padding-top:8px;border-top:1px solid var(--t12)}
.tiercard.is-on .tc-d,.tiercard.is-on .tc-s{color:var(--t80)}
.tiercard.is-on .tc-s{border-top-color:var(--t25)}

/* ── Beverage pickers ── */
.ogate{margin-top:22px;padding:18px 20px;background:var(--surface-2);color:var(--t80);
  font-size:14.5px;border:1px dashed var(--t40)}
.bevgroup{margin-top:26px}
.bev-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--t80);
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
html[lang="ar"] .bev-h{letter-spacing:.04em;text-transform:none;font-size:15px}
.bev-c{font-weight:500;color:var(--ghaf);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bev-c.flash{animation:bevflash .5s var(--out)}
@keyframes bevflash{0%,100%{color:var(--ghaf);transform:none}
  30%{color:#8C2F22;transform:scale(1.14)}70%{color:#8C2F22}}
.bevs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:14px}
@media(max-width:520px){.bevs{grid-template-columns:1fr 1fr}}
.bev{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 14px;border:1px solid var(--surface-line);background:var(--surface);color:var(--t100);
  font-size:14px;text-align:start;touch-action:manipulation;
  transition:border-color var(--t-hover) var(--out),background var(--t-hover) var(--out),
    color var(--t-hover) var(--out),opacity var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.bev:hover{border-color:var(--ghaf)}}
.bev:active{transform:scale(.97)}
.bev.is-on{background:var(--ghaf-tint);border-color:var(--ghaf);color:var(--t100)}
/* An unavailable drink should read as unavailable, not as a smudge.
   Dropping the whole card to 40% muddied the ground, the border and the
   label together. Mute only the label and let the card stay clean. */
.bev.is-full{background:var(--surface);border-color:var(--surface-line);color:var(--t40);
  cursor:not-allowed}
.bev.is-full .bev-x{opacity:.3}
.bev-x{flex:0 0 auto;width:16px;height:16px;border:1px solid currentColor;border-radius:var(--r-round);opacity:.4;position:relative}
.bev.is-on .bev-x{opacity:1;background:var(--ghaf);border-color:var(--ghaf)}
.bev.is-on .bev-x::after{content:"";position:absolute;inset:0;
  background:var(--rimal);clip-path:polygon(20% 52%,42% 72%,80% 28%,88% 38%,42% 86%,12% 60%)}

/* ── Steppers ── */
.oxh{margin-top:28px;display:flex;flex-direction:column;gap:4px;
  font-size:15px;font-weight:500;color:var(--t100)}
.oxh small{font-size:13px;font-weight:300;color:var(--t60)}
.steppers{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.stepper{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 14px;border:1px solid var(--surface-line);background:var(--surface);
  transition:border-color var(--t-hover) var(--out),background var(--t-hover) var(--out)}
.stepper.is-on{border-color:var(--ghaf);background:var(--ghaf-tint)}
@media(max-width:520px){.stepper{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .stepper .st-p{grid-column:1;font-size:13px}}
.st-t{font-size:14.5px;color:var(--t100);line-height:1.5}
.st-p{font-size:13px;color:var(--t60);white-space:nowrap;font-variant-numeric:lining-nums}
.st-c{display:flex;align-items:center;gap:2px}
.st-b{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--surface-line);
  background:var(--surface);color:var(--t100);font-size:19px;line-height:1;touch-action:manipulation;
  transition:background var(--t-hover) var(--out),color var(--t-hover) var(--out),border-color var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.st-b:hover{background:var(--ghaf);color:var(--rimal);border-color:var(--ghaf)}}
.st-b:active{transform:scale(.97)}
.st-c output{min-width:38px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}

/* ── Fields ── */
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:900px){.ogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ogrid{grid-template-columns:1fr}}
.ofield{display:flex;flex-direction:column;gap:7px}
.ofield-w{grid-column:1/-1}
.ofield-sm{max-width:230px;margin-top:22px}
.ofield > span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t60);font-weight:500}
html[lang="ar"] .ofield > span{letter-spacing:.03em;text-transform:none;font-size:14px}
.ofield input,.ofield select{
  min-height:52px;padding:0 14px;border:1px solid var(--surface-line);background:var(--surface);
  font-family:var(--font);font-size:16px;color:var(--t100);border-radius:0;touch-action:manipulation;
  transition:border-color var(--t-hover) var(--out),box-shadow var(--t-hover) var(--out);appearance:none}
.ofield select{background-image:linear-gradient(45deg,transparent 50%,var(--t60) 50%),
  linear-gradient(135deg,var(--t60) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-inline-end:42px}
[dir="rtl"] .ofield select{background-position:20px 22px,26px 22px;padding-inline-end:14px;padding-inline-start:42px}
.ofield input:focus,.ofield select:focus{outline:none;border-color:var(--ghaf);box-shadow:0 0 0 3px var(--ghaf-tint)}

/* ── Summary ── */
.osum{position:sticky;top:calc(var(--nav-h) + 18px)}
@media(max-width:1000px){.osum{position:static}}
.osum-in{background:var(--paper-2);border:1px solid var(--hair);padding:24px 22px 26px;display:flex;flex-direction:column;gap:14px}
.osum-h{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--t60)}
html[lang="ar"] .osum-h{letter-spacing:.04em;text-transform:none;font-size:15px}
.sum-body{display:flex;flex-direction:column;gap:9px;min-height:60px}
.sum-empty{font-size:14px;color:var(--t60);font-weight:300;line-height:1.6}
.sum-r{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--t80);
  padding-bottom:9px;border-bottom:1px solid var(--t12)}
.sum-r b{color:var(--t100);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:6px;font-size:15px;color:var(--t100)}
.sum-total b{font-size:clamp(26px,2.4vw,34px);font-weight:200;letter-spacing:-.03em;
  color:var(--ghaf);font-variant-numeric:tabular-nums}
.sum-vat{font-size:12.5px;color:var(--t60);margin-top:-8px}
.osum-go{width:100%;margin-top:4px}
/* Disabled must still be readable — a muted outline, not a faded fill. */
.osum-go:disabled,.obar-go:disabled{
  background:var(--surface-2);color:var(--t80);border:1px solid var(--surface-line);cursor:not-allowed}
.osum-go:disabled::before,.obar-go:disabled::before{display:none}
.osum-go:disabled .ar,.obar-go:disabled .ar{opacity:.5}
.miss{font-size:12.5px;color:#8C2F22;line-height:1.6}

/* ── Submit buttons: home.css has no .bc/.bc-ghaf (it uses .b/.b-sand
   instead), and those classes lived only in the variant-C style.css this
   page no longer loads. Ported here — the minimal subset this form uses —
   so the summary and sticky-bar CTAs keep their look. ── */
.bc{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;
  padding-inline:clamp(24px,2.2vw,38px);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;position:relative;overflow:hidden;isolation:isolate;touch-action:manipulation;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover),transform var(--t-press) var(--out)}
html[lang="ar"] .bc{letter-spacing:.04em;text-transform:none;font-size:15px}
.bc::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform var(--t-enter) var(--out)}
@media (hover:hover) and (pointer:fine){.bc:hover::before{transform:none}}
.bc:active{transform:scale(.97)}
.bc-ghaf{background:var(--ghaf);color:var(--rimal)}.bc-ghaf::before{background:var(--ghaf-deep)}
.bc .ar{transition:transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.bc:hover .ar{transform:translateX(4px)}}
[dir="rtl"] .bc .ar{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){[dir="rtl"] .bc:hover .ar{transform:scaleX(-1) translateX(4px)}}

/* ── Sticky bar, phones ── */
.obar{position:fixed;inset-inline:0;bottom:0;z-index:96;
  background:rgba(253,243,233,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);transform:translateY(101%);
  transition:transform var(--t-enter) var(--out);
  padding-bottom:env(safe-area-inset-bottom,0)}
.obar.up{transform:none}
@media(min-width:1001px){.obar{display:none}}
.obar-in{max-width:1320px;margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.obar-t{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.obar-t b{font-size:26px;font-weight:200;letter-spacing:-.03em;color:var(--ghaf);font-variant-numeric:tabular-nums}
.obar-t span{font-size:12.5px;color:var(--t60)}
.obar-t small{font-size:12.5px;color:var(--t60);width:100%}
.obar-go{min-height:50px;padding-inline:30px;flex:0 0 auto}

/* the floating WhatsApp button would collide with the sticky bar */
.order-page .wa{bottom:88px}
@media(min-width:1001px){.order-page .wa{bottom:24px}}

/* ══════════════════════════════════════════════════════════════
   ICONS, WATERMARKS AND THE NEW CONTROLS
   ══════════════════════════════════════════════════════════════ */

/* ── Majlis: the figure carries the choice ── */
.bigpicks{grid-template-columns:1fr 1fr;gap:14px}
.bigpick{min-height:auto;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:2px;padding:26px 16px 20px;text-align:center;background:var(--surface)}
/* No greyscale: a white kandura disappears under it. Slight fade at rest only. */
.bp-i{width:clamp(96px,13vw,132px);height:auto;opacity:.86;
  transition:opacity var(--t-hover) var(--out),transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.bigpick:hover .bp-i{transform:translateY(-3px);opacity:1}}
.bigpick.is-on .bp-i{opacity:1;transform:translateY(-3px)}
.bp-t{font-size:clamp(15px,1.4vw,18px);margin-top:12px}
@media(max-width:560px){
  .bigpicks{grid-template-columns:1fr 1fr;gap:10px}
  .bigpick{padding:20px 10px 16px}
  .bp-i{width:clamp(78px,22vw,104px)}
}

/* ── Tier watermark: the namesake object explains the name (currently
   unused — order.js does not emit .tc-mark markup — kept ready) ── */
.tiercard{overflow:hidden;isolation:isolate}
.tc-mark{
  position:absolute;inset-inline-end:-18%;bottom:-18%;
  width:74%;height:auto;aspect-ratio:1;z-index:-1;pointer-events:none;
  color:var(--ghaf);opacity:.075;
  transition:opacity var(--t-hover) var(--out),transform var(--t-enter) var(--out),filter var(--t-hover);
}
.tc-mark-img{filter:grayscale(1);opacity:.09}
@media (hover:hover) and (pointer:fine){
  .tiercard:hover .tc-mark{opacity:.14;transform:scale(1.04)}
  .tiercard:hover .tc-mark-img{opacity:.15}
}
.tiercard.is-on .tc-mark{color:var(--rimal);opacity:.20;transform:scale(1.07)}
.tiercard.is-on .tc-mark-img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.22}
[dir="rtl"] .tc-mark{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){[dir="rtl"] .tiercard:hover .tc-mark{transform:scaleX(-1) scale(1.04)}}
[dir="rtl"] .tiercard.is-on .tc-mark{transform:scaleX(-1) scale(1.07)}
.no-motion .tc-mark{transition:none}

/* ── The free-text occasion ── */
.ofield-note{margin-top:14px;max-width:420px}
.ofield-note input{width:100%}

/* ── Extra-drink picker ── */
.addrow{margin-top:12px;max-width:420px}
.addrow select{
  width:100%;min-height:52px;padding:0 14px;border:1px solid var(--surface-line);background:var(--surface);
  font-family:var(--font);font-size:16px;color:var(--t100);border-radius:0;appearance:none;touch-action:manipulation;
  background-image:linear-gradient(45deg,transparent 50%,var(--t60) 50%),
    linear-gradient(135deg,var(--t60) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-inline-end:42px}
[dir="rtl"] .addrow select{background-position:20px 22px,26px 22px;padding-inline-end:14px;padding-inline-start:42px}
.addrow select:focus{outline:none;border-color:var(--ghaf);box-shadow:0 0 0 3px var(--ghaf-tint)}
#extraDrinkList:not(:empty){margin-top:10px}

/* ── The slot that fills when the bites menu is ready ── */
.soonbox{
  margin-top:12px;min-height:76px;border:1px dashed var(--t40);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.soon-tag{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t60);font-weight:500}
html[lang="ar"] .soon-tag{letter-spacing:.04em;text-transform:none;font-size:14px}

/* ── Headings breathe now that the descriptions are gone ── */
.ost-d:empty{display:none}
.ost-h + .bigpicks,.ost-h + .chips,.ost-h + .tiercards,
.ost-h + .ogate,.ost-h + #bevBody,.ost-h + .ogrid{margin-top:24px}
.ohead-p{max-width:44ch}