/* ============================================================
   ownyourmailserver.com — production home page
   Source: "OYMS Homepage v2" design export (Claude Design).
   The page markup keeps its original inline styles so the design
   stays byte-for-byte what was signed off. This file holds only:
     1. the base rules that came from the export's <helmet>
     2. the page shell
     3. hover states (the export used a style-hover attribute that
        real browsers ignore — these are the same effects, in CSS)
     4. the legal pages
   Untouched original: _export_original/
   ============================================================ */

/* ---------- 1. from the export ---------- */
body { margin:0; background:#f7f6f4; font-family:"DM Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:#ff5a00; }

input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; }
input[type=range]::-webkit-slider-runnable-track{ height:4px; background:rgba(0,0,0,.14); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:#ff5a00; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
input[type=range]::-moz-range-track{ height:4px; background:rgba(0,0,0,.14); border-radius:2px; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#ff5a00; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }

.dk input[type=range]::-webkit-slider-runnable-track{ height:2px; background:#2a2a2a; border-radius:0; }
.dk input[type=range]::-webkit-slider-thumb{ width:14px; height:14px; margin-top:-6px; border-radius:0; background:#ff5a00; border:0; box-shadow:none; }

details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

/* ---------- 2. page shell ---------- */
.page {
  max-width:1280px;
  margin:0 auto;
  background:#f7f6f4;
  color:#101010;
  overflow:hidden;
}

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* anchor targets clear the nav — which is sticky below 900px */
#math, #problem, #get, #handover, #placement, #how, #faq, #book { scroll-margin-top:24px; }
@media (max-width:900px) {
  #math, #problem, #get, #handover, #placement, #how, #faq, #book { scroll-margin-top:78px; }
}

/* ---------- 3. hover states ---------- */
/* replaces the export's style-hover attribute, which does nothing in a browser */
.hv-fill:hover   { background:#ff5a00 !important; color:#fff !important; }
.hv-line:hover   { border-color:#101010 !important; background:#fff !important; color:inherit !important; }
.hv-invert:hover { background:#fff !important; color:#101010 !important; }

details summary:hover { color:#ff5a00; }
:focus-visible { outline:2px solid #ff5a00; outline-offset:3px; border-radius:4px; }

/* ============================================================
   5. CALCULATOR — editable numbers, currency picker, footnote
   ============================================================ */

.ctrl { display:flex; flex-direction:column; gap:12px; }
.ctrl-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.ctrl-head label { font-size:15px; font-weight:500; color:#101010; }

/* the numbers are inputs, not readouts — type anything, the slider is a shortcut */
.num {
  font-family:'IBM Plex Mono', monospace;
  font-size:17px; font-weight:600; color:#101010;
  width:112px; text-align:right;
  padding:7px 10px;
  border:1px solid rgba(0,0,0,.14); border-radius:9px;
  background:#faf9f7;
}
.num:focus { outline:none; border-color:#ff5a00; background:#fff; box-shadow:0 0 0 3px rgba(255,90,0,.12); }

.num-wrap { display:flex; align-items:stretch; }
.num-sym {
  display:flex; align-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:#8a8983;
  padding:0 9px;
  border:1px solid rgba(0,0,0,.14); border-right:0; background:#f2f1ee;
  border-radius:9px 0 0 9px;
}
.num-wrap .num { border-radius:0 9px 9px 0; width:96px; }
/* some currencies print the symbol after the number (32 kr, 12 zl) */
.num-wrap.suffix { flex-direction:row-reverse; }
.num-wrap.suffix .num-sym { border-radius:0 9px 9px 0; border-right:1px solid rgba(0,0,0,.14); border-left:0; }
.num-wrap.suffix .num { border-radius:9px 0 0 9px; }

/* the three-year rows need room for wide formats like Rp160.000.000 */
.yr { min-width:112px; display:inline-block; }

/* The card used to clip its children with overflow:hidden, which ate the
   currency dropdown. The columns now carry their own corners instead, so
   nothing needs clipping and the popover can escape the card. */
.math-left  { border-radius:18px 0 0 18px; }
.math-right { border-radius:0 18px 18px 0; }
@media (max-width: 900px) {
  .math-left  { border-radius:18px 18px 0 0 !important; }
  .math-right { border-radius:0 0 18px 18px !important; }
}

/* ---- currency picker (a native select can't carry an SVG per option) ---- */
.cur-picker { position:relative; }
.cur-btn {
  display:flex; align-items:center; gap:8px; min-width:118px;
  font-family:inherit; font-size:14.5px; font-weight:600; color:#101010;
  padding:7px 10px;
  background:#faf9f7; border:1px solid rgba(0,0,0,.14); border-radius:9px;
  cursor:pointer;
}
.cur-btn:hover { border-color:#101010; }
.cur-caret { margin-left:auto; font-size:11px; color:#8a8983; }

.cur-flag {
  width:20px; height:14px; flex:0 0 auto; display:block;
  border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;
}
.cur-flag svg { display:block; width:100%; height:100%; }

.cur-list {
  position:absolute; right:0; top:calc(100% + 6px); z-index:25;
  width:152px; max-height:244px; overflow-y:auto;
  padding:6px;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.35);
}
.cur-opt {
  display:flex; align-items:center; gap:9px; width:100%;
  font-family:inherit; font-size:14px; font-weight:500; color:#3d3c39;
  padding:7px 8px; border:0; border-radius:8px; background:transparent;
  cursor:pointer; text-align:left;
}
.cur-opt:hover { background:#f4f3f0; color:#101010; }

/* ---- the shared best-practice footnote ---- */
.ast { color:#ff5a00; font-weight:600; text-decoration:none; }
a.ast:hover { text-decoration:underline; }
.footnote {
  margin:8px 0 0;
  font-size:14px; line-height:1.55; color:#6b6a66;
  scroll-margin-top:90px;
}
.footnote .ast { margin-right:3px; }

/* ============================================================
   6. RESPONSIVE
   The design ships as a fixed 1280px desktop canvas with every rule
   inline, so these overrides need !important to win. Additive only —
   above 1080px the page is byte-identical to the signed-off design.
   ============================================================ */

/* the handover + guarantee blocks are inset cards, not full-bleed bands.
   The section after a card doesn't need its divider hairline any more —
   the card's own edge is the separation. */
.band + div { border-top: 0 !important; }

/* they take margins where the other sections take padding */
@media (max-width: 1080px) {
  .page > .band { margin-left: 32px !important; margin-right: 32px !important; padding-left: 36px !important; padding-right: 36px !important; }
}
@media (max-width: 640px) {
  .page > .band { margin-left: 20px !important; margin-right: 20px !important; padding: 40px 22px !important; border-radius: 18px !important; }
}

/* ---- small laptop / tablet ---- */
@media (max-width: 1080px) {
  .page > div { padding-left: 32px !important; padding-right: 32px !important; }
  .stats { margin-left: 32px !important; margin-right: 32px !important; }
  .cards-3 { grid-template-columns: 1fr 1fr !important; }
  .split { gap: 32px !important; }
  .nav-links { gap: 22px !important; font-size: 14px !important; }
  .logos-strip { gap: 28px !important; }
  .step-row { grid-template-columns: 96px 1fr !important; }
  .step-row > p { grid-column: 2 !important; margin-top: 4px !important; }
}

/* ---- stack the two-up layouts ---- */
@media (max-width: 900px) {
  body { overflow-x: clip; }
  .page { overflow: visible !important; }

  .two-col { grid-template-columns: 1fr !important; }
  .split { grid-template-columns: 1fr !important; gap: 34px !important; }
  .math-card { grid-template-columns: 1fr !important; }
  .math-left { border-right: 0 !important; border-bottom: 1px solid rgba(0,0,0,.09) !important; }
  .playbook { grid-template-columns: 1fr !important; }
  .playbook-r { border-left: 0 !important; border-top: 1px solid rgba(0,0,0,.08) !important; }

  /* the nav runs out of room before the phone breakpoint */
  .nav {
    position: sticky !important; top: 0 !important; z-index: 30 !important;
    background: rgba(247,246,244,.92) !important;
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
  }
  .nav-links { display: none !important; }
  .nav-right > span { display: none !important; }

  /* stats read better 2 x 2 once the column narrows */
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stats > div { padding: 22px 18px !important; border-right: 1px solid rgba(0,0,0,.09) !important; }
  .stats > div:nth-child(2n) { border-right: 0 !important; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid rgba(0,0,0,.09); }

  /* these two overflow before anything else does */
  .logos { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .logos > p { max-width: none !important; }
  .logos-strip { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 20px 30px !important; width: 100%; }
  .foot { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .foot-links { flex-wrap: wrap !important; gap: 12px 22px !important; }

  /* type: the canvas sizes are tuned for 1280 */
  .page h1 { font-size: 52px !important; }
  .page h2 { font-size: 34px !important; }
  .page [style*="font-size:64px"] { font-size: 44px !important; }
  .page [style*="font-size:62px"] { font-size: 50px !important; }
  .page [style*="font-size:44px"] { font-size: 34px !important; }
  .page [style*="font-size:40px"] { font-size: 32px !important; }
  .page img, .page svg { max-width: 100%; }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  body { overflow-x: clip; }
  .page { overflow: visible !important; }
  .page > div { padding-left: 20px !important; padding-right: 20px !important; }

  /* nav: collapse to mark + CTA, and keep the CTA reachable down the page */
  .nav {
    position: sticky !important; top: 0 !important; z-index: 30 !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
    background: rgba(247,246,244,.92) !important;
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
  }
  .nav-links { display: none !important; }
  .nav-right > span { display: none !important; }
  .nav-right a { padding: 10px 16px !important; font-size: 13.5px !important; }

  /* hero */
  .hero { padding-top: 44px !important; padding-bottom: 38px !important; }
  .hero-copy { gap: 22px !important; }
  .hero-btns { flex-wrap: wrap !important; gap: 10px !important; align-self: stretch !important; justify-content: center !important; }
  .hero-btns a { flex: 1 1 45%; text-align: center; }

  /* stats: 4 across -> 2 x 2 */
  .stats { grid-template-columns: 1fr 1fr !important; margin-left: 20px !important; margin-right: 20px !important; }
  .stats > div { padding: 20px 14px !important; border-right: 1px solid rgba(0,0,0,.09) !important; }
  .stats > div:nth-child(2n) { border-right: 0 !important; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid rgba(0,0,0,.09); }

  /* compatibility logos */
  .logos { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding-top: 24px !important; padding-bottom: 28px !important; }
  .logos > p { max-width: none !important; }
  .logos-strip { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 20px 26px !important; width: 100%; }
  .logos-strip img { height: 18px !important; }

  /* calculator */
  .ctrl-head { gap: 10px; }
  .ctrl-head label { font-size: 14.5px; }
  .num { font-size: 15.5px; width: 96px; padding: 6px 9px; }
  .num-wrap .num { width: 84px; }
  .num-sym { font-size: 14px; padding: 0 8px; }
  .cur-btn { min-width: 104px; font-size: 13.5px; padding: 6px 9px; }
  .cur-list { width: 142px; max-height: 210px; }
  .yr { min-width: 92px; }

  /* cards */
  .cards-3 { grid-template-columns: 1fr !important; }
  .two-col > div { padding: 26px 22px !important; }
  .math-left, .math-card > div { padding: 26px 22px !important; }
  .split > div[style*="border-radius:18px"] { padding: 24px 22px !important; }

  /* who-you-pay ledger: label + amount on one line, description under */
  .ledger-row { grid-template-columns: 1fr auto !important; gap: 4px 12px !important; }
  .ledger-row > b { grid-area: 1 / 1; }
  .ledger-row > span:last-of-type { grid-area: 1 / 2; }
  .ledger-row > span:first-of-type { grid-area: 2 / 1 / 3 / 3; }

  /* how it works */
  .step-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 20px 0 !important; }
  .step-row > p { grid-column: auto !important; }

  /* closing CTA + footer */
  .cta-card { padding: 44px 22px !important; border-radius: 18px !important; }
  .foot { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .foot-links { flex-wrap: wrap !important; gap: 12px 20px !important; }

  /* type scale — the design's sizes are tuned for a 1280px canvas */
  .page h1 { font-size: 40px !important; line-height: 1.02 !important; }
  .page h2 { font-size: 29px !important; }
  .page h3 { font-size: 18px !important; }
  .page details summary { font-size: 16.5px !important; padding: 18px 0 !important; }
  .page [style*="font-size:64px"] { font-size: 34px !important; }
  .page [style*="font-size:62px"] { font-size: 42px !important; }
  .page [style*="font-size:44px"] { font-size: 29px !important; }
  .page [style*="font-size:40px"] { font-size: 27px !important; }
  .page [style*="font-size:36px"] { font-size: 26px !important; }
  .page [style*="font-size:34px"] { font-size: 25px !important; }
  .page [style*="font-size:26px"] { font-size: 21px !important; }
  .page [style*="font-size:19px"] { font-size: 16.5px !important; }
  .page [style*="font-size:17.5px"] { font-size: 16px !important; }
  .page [style*="font-size:17px"] { font-size: 16px !important; }
  .page [style*="font-size:16.5px"] { font-size: 15.5px !important; }

  /* nothing may push the page sideways */
  .page img, .page svg { max-width: 100%; }
}

@media (max-width: 380px) {
  .page h1 { font-size: 35px !important; }
  .hero-btns a { flex: 1 1 100%; }
  .page [style*="font-size:62px"] { font-size: 36px !important; }
}

/* ---------- 4. legal pages ---------- */
.legal { max-width:760px; margin:0 auto; padding:56px 32px 72px; color:#3d3c39; }
.legal h1 { font-size:40px; line-height:1.05; letter-spacing:-.03em; font-weight:600; color:#101010; margin:0 0 6px; }
.legal h2 { font-size:19px; letter-spacing:-.02em; font-weight:600; color:#101010; margin:32px 0 8px; }
.legal p, .legal li { font-size:15.5px; line-height:1.6; }
.legal ul { margin:10px 0 0 20px; padding:0; }
.legal li { margin-bottom:7px; }
.legal a { color:#101010; text-decoration:underline; }
.legal a:hover { color:#ff5a00; }
.legal .updated { font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#8a8983; margin-bottom:28px; }
.legal .entity {
  margin-top:14px; padding:18px 20px; background:#fff;
  border:1px solid rgba(0,0,0,.1); border-radius:14px;
  font-size:14.5px; line-height:1.6; color:#4a4945;
}
.legal-bar {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1280px; margin:0 auto; padding:20px 32px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.legal-bar .mark { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.legal-bar .mark img { width:22px; height:22px; object-fit:contain; }
.legal-bar .back { font-size:14px; color:#4a4945; border:1px solid rgba(0,0,0,.18); padding:9px 16px; border-radius:10px; }
.legal-bar .back:hover { border-color:#101010; color:#101010; }
.legal-foot { max-width:1280px; margin:0 auto; padding:32px; border-top:1px solid rgba(0,0,0,.1); font-size:14px; color:#8a8983; display:flex; gap:24px; flex-wrap:wrap; }

@media (max-width: 640px) {
  .legal { padding:36px 20px 56px; }
  .legal h1 { font-size:30px; }
  .legal-bar { padding:14px 20px; }
  .legal-bar .mark { font-size:15px; }
  .legal-foot { padding:24px 20px; gap:14px; }
  .legal-foot span { margin-left:0 !important; width:100%; }
}