/* KIAH — shared stylesheet for the checkout flow.
   No framework and no reset library: this is a five-page site and every rule
   here is one somebody chose. */

@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/InstrumentSerif-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/assets/fonts/InstrumentSerif-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Karla"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/assets/fonts/Karla-variable.woff2") format("woff2"); }

:root {
  --dark:#0E1A0F;  --dark-2:#162616;
  --page:#F3F0E4;  --page-2:#E7E2D0;
  --card:#FFFFFF;
  --text:#14180F;  --muted:#4C5344;
  --accent:#C08A2E; --accent-lt:#E0AB55;
  --soft:#8FA37E;  --line:#CFC9B4;
  --cta:#0F7A3D;   --cta-edge:#0A5429;
  --danger:#A3341F;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --wrap:540px;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0; background:var(--page); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

[hidden] { display:none !important; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.wrap-wide { max-width:1080px; margin:0 auto; padding:0 16px; }

/* ---------- header ---------- */
.top { background:var(--dark); color:var(--page); padding:18px 0; }
.top .row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.top .brand { font-family:var(--serif); font-size:23px; letter-spacing:.14em;
              color:var(--page); text-decoration:none; }
.top .secure { font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.75;
               display:flex; align-items:center; gap:6px; }
.top .secure svg { width:13px; height:13px; }

/* ---------- three-step tracker ----------
   Straight line, number above each label, and the connector fills as you move.
   People read a progress bar as a promise about how much is left, so the count
   is fixed at three from the first screen and never grows. */
.steps { display:flex; align-items:flex-start; justify-content:center; padding:20px 0 4px; }
.steps .st { display:flex; flex-direction:column; align-items:center; gap:7px;
             width:104px; flex:0 0 auto; }
.steps .bub { width:32px; height:32px; border-radius:50%; display:flex;
              align-items:center; justify-content:center; font-size:14px; font-weight:700;
              border:2px solid var(--line); background:var(--card); color:var(--muted);
              transition:background .25s, border-color .25s, color .25s; }
.steps .st.now .bub  { background:var(--dark); border-color:var(--dark); color:var(--page); }
.steps .st.done .bub { background:var(--cta);  border-color:var(--cta);  color:#fff; font-size:16px; }
.steps .lbl { font-size:11.5px; font-weight:600; line-height:1.25; text-align:center; color:var(--muted); }
.steps .st.now .lbl, .steps .st.done .lbl { color:var(--text); }
.steps .bar { flex:0 1 56px; height:3px; border-radius:3px; background:var(--line);
              margin-top:15px; transition:background .3s; }
.steps .bar.done { background:var(--cta); }

/* ---------- section headings ---------- */
h1.page-title { font-family:var(--serif); font-size:27px; font-weight:400; margin:18px 0 4px;
                letter-spacing:.01em; }
p.page-sub { margin:0 0 20px; font-size:14px; color:var(--muted); }
h2.title { font-size:16px; font-weight:700; margin:0 0 12px; letter-spacing:.01em; }

/* ---------- cards ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 16px;
        margin-bottom:16px; }
.card > h2.title:first-child { margin-top:0; }

/* ---------- form ---------- */
.field { margin-bottom:14px; }
.field > label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.field .hint { font-size:12px; color:var(--muted); font-weight:400; }

.field input, .field select, .field textarea {
  width:100%; font-family:inherit; font-size:16px;   /* 16px stops iOS zooming on focus */
  color:var(--text); background:var(--card);
  border:1.5px solid var(--line); border-radius:9px;
  padding:13px; min-height:50px;
  transition:border-color .15s, box-shadow .15s;
  appearance:none; -webkit-appearance:none;
}
.field textarea { min-height:78px; resize:vertical; line-height:1.5; }
.field select {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='none'%20stroke='%234C5344'%20stroke-width='1.6'%20d='M1%201l5%205%205-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
  padding-right:36px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--dark); box-shadow:0 0 0 3px rgba(14,26,15,.10);
}
.field.bad input, .field.bad select, .field.bad textarea { border-color:var(--danger); }
.field .err { display:none; font-size:12.5px; color:var(--danger); margin-top:5px; font-weight:600; }
.field.bad .err { display:block; }

.field .prefix { display:flex; align-items:stretch; }
.field .prefix .tag { display:flex; align-items:center; padding:0 12px; font-size:15px; font-weight:600;
                      color:var(--muted); background:var(--page-2);
                      border:1.5px solid var(--line); border-right:0;
                      border-radius:9px 0 0 9px; }
.field .prefix input { border-radius:0 9px 9px 0; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (max-width:420px) { .two { grid-template-columns:1fr; } }

.pin-status { font-size:12.5px; margin-top:5px; min-height:17px; color:var(--muted); }
.pin-status.ok { color:var(--cta); font-weight:600; }
.pin-status.no { color:var(--danger); font-weight:600; }

/* ---------- order summary ---------- */
.summary { background:var(--card); border-bottom:1px solid var(--line); padding:14px 0; }
.summary .row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.summary .lbl { font-size:13px; color:var(--muted); }
.summary .amt { font-family:var(--serif); font-size:31px; line-height:1; font-variant-numeric:tabular-nums; }
.summary .line { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }

.bill { border-top:1px dashed var(--line); margin-top:14px; padding-top:12px; }
.bill .r { display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:7px; }
.bill .r span:last-child { font-variant-numeric:tabular-nums; }
.bill .r.free span:last-child { color:var(--cta); font-weight:700; }
/* the price it would have been: present, but plainly the lesser of the two */
.bill .r.free span:last-child s { color:var(--muted); font-weight:400;
                                  margin-right:7px; text-decoration-thickness:1px; }
/* a saving is the one line on a bill worth colouring — both halves of it */
.bill .r.off span { color:var(--cta); font-weight:700; }
.bill .r.total { border-top:1px solid var(--line); margin-top:10px; padding-top:11px;
                 font-size:17px; font-weight:700; margin-bottom:0; }

/* ---------- payment method cards ---------- */
.methods { display:grid; gap:12px; margin-bottom:20px; }
.method { border:1.5px solid var(--line); border-radius:11px; background:var(--card);
          overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.method.on { border-color:var(--dark); border-width:2px;
             box-shadow:0 2px 0 rgba(0,0,0,.05), 0 8px 20px rgba(14,26,15,.09); }
.method > .pick { display:flex; align-items:center; gap:13px; width:100%;
                  padding:16px; min-height:66px; cursor:pointer;
                  background:none; border:0; text-align:left; font-family:inherit;
                  font-size:16px; color:var(--text); }
.method .radio { flex:0 0 21px; width:21px; height:21px; border-radius:50%;
                 border:2px solid var(--line); position:relative; }
.method.on .radio { border-color:var(--dark); }
.method.on .radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--dark); }
.method .meta { flex:1; min-width:0; }
.method .meta b { display:block; font-size:15.5px; font-weight:700; }
.method .meta span { display:block; font-size:13px; color:var(--muted); margin-top:1px; }
.method .tag { flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.09em;
               text-transform:uppercase; background:var(--accent-lt); color:var(--dark);
               padding:5px 8px; border-radius:5px; white-space:nowrap; }
/* the saving tag is louder than the old "recommended" one because it is a
   fact about the customer's money rather than an opinion about the option */
.method .tag.save { background:var(--cta); color:#fff; font-size:11px; letter-spacing:.04em;
                    padding:6px 10px; }
.method .fee { flex:0 0 auto; font-size:13px; font-weight:700; color:var(--muted);
               background:var(--page); border-radius:6px; padding:5px 9px; white-space:nowrap; }

.method .marks { display:flex; align-items:center; gap:9px; padding:0 16px 14px; flex-wrap:wrap; }
.method .marks .m { font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--muted);
                    border:1px solid var(--line); border-radius:5px; padding:4px 7px;
                    background:var(--page); }

/* ---------- the 3D call to action ---------- */
.cta { display:block; width:100%; border:0; border-radius:12px;
       background:var(--cta); color:#fff; font-family:inherit;
       font-size:16px; font-weight:700; letter-spacing:.02em;
       padding:18px; min-height:62px; cursor:pointer; text-align:center;
       text-decoration:none;
       box-shadow:0 6px 0 var(--cta-edge), 0 12px 22px rgba(0,0,0,.19);
       transform:translateY(0);
       transition:transform .09s ease, box-shadow .09s ease, background .15s; }
.cta:hover { filter:brightness(1.04); }
.cta:active { transform:translateY(5px); box-shadow:0 1px 0 var(--cta-edge), 0 3px 8px rgba(0,0,0,.18); }
.cta[disabled], .cta.busy { background:#B9BDB4; box-shadow:0 6px 0 #9A9E96; cursor:not-allowed; filter:none; }
.cta[disabled]:active, .cta.busy:active { transform:none; box-shadow:0 6px 0 #9A9E96; }
.cta .sub { display:block; font-size:12px; font-weight:600; opacity:.85; margin-top:3px; letter-spacing:.04em; }

.cta-dark { background:var(--dark); box-shadow:0 6px 0 #060D06, 0 12px 22px rgba(0,0,0,.19); }
.cta-dark:active { box-shadow:0 1px 0 #060D06, 0 3px 8px rgba(0,0,0,.18); }

.back { display:inline-flex; align-items:center; gap:6px; margin-top:16px;
        font-size:13.5px; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--text); text-decoration:underline; }

/* ---------- trust row ---------- */
.trust { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
         margin-top:16px; font-size:12px; color:var(--muted); }
.trust span { position:relative; padding-left:15px; }
.trust span::before { content:"\2713"; position:absolute; left:0; color:var(--cta); font-weight:700; }

.note { margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5; }
.note a { color:var(--muted); }

/* ---------- alerts ---------- */
.alert { border-radius:10px; padding:14px 15px; margin-bottom:16px; font-size:14.5px; line-height:1.5; }
.alert b { display:block; margin-bottom:3px; }
.alert.warn { background:#FFF6E6; border:1.5px solid var(--accent-lt); }
.alert.err { background:#FCEDE9; border:1.5px solid var(--danger); color:#6E2214; }

/* ---------- spinner ---------- */
.spin { display:inline-block; width:15px; height:15px; vertical-align:-2px;
        border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
        animation:kspin .7s linear infinite; margin-right:8px; }
@keyframes kspin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) {
  .cta, .method, .steps .bub, .steps .bar { transition:none; }
  .spin { animation-duration:2s; }
}

/* ---------- footer ---------- */
.foot { margin-top:34px; padding:22px 0 30px; border-top:1px solid var(--line);
        font-size:12.5px; color:var(--muted); text-align:center; }
.foot a { color:var(--muted); }
.foot .links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-bottom:10px; }