/* ==========================================================================
   Tibimundum Travel Calendar — "Tiffany Hour"

   Mobile first, and not in the token sense: every size below is written for
   a phone held in one hand, and the desktop rules at the bottom only widen
   the container. Traffic arrives from Instagram, TikTok and YouTube, so the
   phone IS the product and the laptop is the accommodation.

   The ground stays dark on purpose. A white feed is the most crowded look on
   Instagram, and Tiffany blue is at its most recognisable as a bright mark
   against a dark ground — the same reason the box reads the way it does
   against black ribbon.
   ========================================================================== */

:root {
  --tiffany:      #81D8D0;
  --tiffany-deep: #0ABAB5;
  --seafoam:      #689E9E;
  --ivory:        #F7F5F0;
  --body:         #CDD5D5;
  --night:        #04141A;
  --dusk:         #0A343A;
  --ember:        #117671;

  --card:      rgba(255, 255, 255, .045);
  --card-edge: rgba(129, 216, 208, .16);
  --hairline:  rgba(129, 216, 208, .12);

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --head: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tap: 52px;              /* nothing interactive is ever smaller */
  --pad: 20px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--night);
  background-image:
    radial-gradient(120% 70% at 50% 0%, var(--dusk) 0%, var(--night) 62%),
    linear-gradient(180deg, transparent 60%, rgba(17, 118, 113, .18) 100%);
  background-attachment: fixed;
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--pad) 64px; }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--head); font-weight: 600; color: var(--ivory);
             line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }

.display { font-family: var(--display); font-weight: 400; color: var(--ivory);
           line-height: .95; letter-spacing: .01em; text-transform: uppercase; }

.eyebrow { font-family: var(--head); font-size: .72rem; font-weight: 500;
           letter-spacing: .16em; text-transform: uppercase; color: var(--seafoam);
           margin: 0 0 .9em; }

.tiff { color: var(--tiffany); }
.muted { color: var(--seafoam); }
.small { font-size: .84rem; line-height: 1.5; }
.center { text-align: center; }

a { color: var(--tiffany); }

/* --- header -------------------------------------------------------------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad); max-width: 560px; margin: 0 auto;
}
.wordmark { font-family: var(--head); font-weight: 600; font-size: .82rem;
            letter-spacing: .3em; text-transform: uppercase; color: var(--ivory);
            text-decoration: none; }
.stamp {
  width: 30px; height: 30px; border: 2px solid var(--tiffany-deep);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--tiffany-deep); font-family: var(--head); font-size: .58rem;
  letter-spacing: .04em; transform: rotate(-11deg); opacity: .9;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: block; width: 100%; min-height: var(--tap);
  padding: 15px 22px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: var(--head); font-size: 1rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  text-decoration: none; transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--tiffany); color: #06222A; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--tiffany);
             border: 1px solid var(--card-edge); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: 34px 0 8px; }
.hero .display { font-size: clamp(2.6rem, 13vw, 3.6rem); margin: 0 0 18px; }
.hero p { font-size: 1.06rem; color: var(--body); margin: 0 0 26px; max-width: 30ch; }

.proof { margin: 30px 0; padding: 22px; border-radius: 16px;
         background: var(--card); border: 1px solid var(--card-edge); }
.proof .equation { font-family: var(--head); font-size: 1.02rem; letter-spacing: .04em;
                   text-transform: uppercase; color: var(--seafoam); margin: 0 0 6px; }
.proof .answer { font-family: var(--display); font-size: 2.5rem; color: var(--tiffany);
                 line-height: 1; margin: 0; }

.how { counter-reset: step; margin: 34px 0 0; padding: 0; list-style: none; }
.how li { counter-increment: step; position: relative; padding: 0 0 20px 44px; }
.how li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(129, 216, 208, .12); color: var(--tiffany);
  font-family: var(--head); font-size: .9rem; display: grid; place-items: center;
}
.how strong { color: var(--ivory); font-weight: 600; display: block; }

/* --- form ---------------------------------------------------------------- */

.progress { display: flex; gap: 6px; margin: 6px 0 26px; }
.progress span { flex: 1; height: 3px; border-radius: 2px;
                 background: rgba(129, 216, 208, .16); transition: background .25s; }
.progress span.on { background: var(--tiffany); }

.step { display: none; }
.step.on { display: block; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.field { margin: 0 0 26px; }
.field > label { display: block; font-family: var(--head); font-size: .95rem;
                 letter-spacing: .06em; text-transform: uppercase;
                 color: var(--ivory); margin: 0 0 4px; }
.field .hint { font-size: .84rem; color: var(--seafoam); margin: 0 0 12px; }

input[type="text"], input[type="number"], input[type="date"], input[type="email"] {
  width: 100%; min-height: var(--tap); padding: 12px 16px;
  background: rgba(0, 0, 0, .28); color: var(--ivory);
  border: 1px solid var(--card-edge); border-radius: 12px;
  font-family: var(--text); font-size: 1.05rem;
}
input:focus { outline: 2px solid var(--tiffany); outline-offset: 1px; }
input[type="date"] { color-scheme: dark; }

/* Stepper — big targets so nobody has to type a number on a phone. */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button {
  width: var(--tap); height: var(--tap); flex: 0 0 var(--tap);
  border-radius: 12px; border: 1px solid var(--card-edge);
  background: var(--card); color: var(--tiffany);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.stepper button:active { background: rgba(129, 216, 208, .16); }
.stepper input { text-align: center; font-family: var(--display); font-size: 1.6rem; }

/* Chips — weekdays and holidays. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  color: var(--body); font-family: var(--head); font-size: .92rem;
  letter-spacing: .05em; cursor: pointer; user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chip input:checked + span {
  background: var(--tiffany); border-color: var(--tiffany); color: #06222A;
  font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--tiffany); outline-offset: 2px; }
.chips.week .chip { flex: 1 1 0; min-width: 44px; }

/* Holiday list — a row per holiday, date on the right. */
.hol { display: block; margin: 0 0 8px; }
.hol input { position: absolute; opacity: 0; pointer-events: none; }
.hol > span {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap);
  padding: 11px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--card-edge);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.hol .box {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
  border: 1.5px solid var(--seafoam); display: grid; place-items: center;
  color: transparent; font-size: .8rem; font-weight: 700;
}
.hol .nm { flex: 1; color: var(--ivory); font-size: .97rem; }
.hol .dt { color: var(--seafoam); font-family: var(--head); font-size: .82rem;
           letter-spacing: .04em; text-align: right; }
.hol > input:checked + span { border-color: var(--tiffany); background: rgba(129, 216, 208, .09); }
.hol > input:checked + span .box { background: var(--tiffany); border-color: var(--tiffany); color: #06222A; }
.hol .shifted { display: block; font-size: .72rem; color: var(--tiffany); opacity: .75; }

.custom-row { display: flex; gap: 8px; margin: 0 0 8px; }
.custom-row input[type="text"] { flex: 1.4; }
.custom-row input[type="date"] { flex: 1; }

/* Option cards — trip length and objective. */
.opts { display: grid; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  display: block; padding: 16px 18px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--card-edge); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opt strong { display: block; font-family: var(--head); font-size: 1.02rem;
              letter-spacing: .04em; color: var(--ivory); }
.opt em { display: block; font-style: normal; font-size: .86rem; color: var(--seafoam); }
.opt input:checked + span { border-color: var(--tiffany); background: rgba(129, 216, 208, .11); }
.opt input:checked + span strong { color: var(--tiffany); }

/* --- result: the payoff screen ------------------------------------------- */

.payoff { padding: 30px 0 10px; text-align: center; }
.payoff .display { font-size: clamp(1.9rem, 8.5vw, 2.5rem); margin: 0 0 22px; }
.gave { font-size: .95rem; color: var(--seafoam); margin: 0 0 26px; }

/* Every big number below is a <p>, and a <p> carries a 1em default margin.
   At a 6.5rem font size that is a 100px gap above and below the headline
   figure, which on desktop pushed "POTENTIAL DAYS AWAY" most of a screen
   away from the number it labels. Margins are set explicitly here rather
   than inherited from the browser. */
.bignum { font-family: var(--display); color: var(--tiffany);
          font-size: clamp(4.2rem, 24vw, 6.5rem); line-height: .88; margin: 0; }
.bigsub { font-family: var(--head); font-size: 1rem; letter-spacing: .18em;
          text-transform: uppercase; color: var(--ivory); margin: 4px 0 26px; }

.mult {
  display: inline-block; padding: 16px 30px; border-radius: 16px;
  background: rgba(129, 216, 208, .1); border: 1px solid var(--card-edge);
}
.mult .n { font-family: var(--display); font-size: 2.6rem; color: var(--tiffany);
          line-height: 1; margin: 0; }
.mult .l { font-family: var(--head); font-size: .74rem; letter-spacing: .2em;
           text-transform: uppercase; color: var(--seafoam); margin: 6px 0 0; }
.basis { font-size: .82rem; color: var(--seafoam); margin: 12px 0 0; }

.divider { height: 1px; background: var(--hairline); margin: 34px 0; border: 0; }

/* --- result: window cards ------------------------------------------------ */

.monthhead { font-family: var(--head); font-size: .76rem; letter-spacing: .22em;
             text-transform: uppercase; color: var(--seafoam);
             margin: 30px 0 12px; padding-bottom: 8px;
             border-bottom: 1px solid var(--hairline); }

.card {
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 18px; padding: 22px; margin: 0 0 14px;
}
.card .len { font-family: var(--display); font-size: 1.7rem; color: var(--ivory);
             line-height: 1; margin: 0; }
.card .dates { font-family: var(--head); font-size: 1.02rem; letter-spacing: .1em;
               text-transform: uppercase; color: var(--tiffany); margin: 6px 0 18px; }

.trade { display: flex; align-items: stretch; gap: 14px; margin: 0 0 18px; }
.trade > div { flex: 1; padding: 14px; border-radius: 12px;
               background: rgba(0, 0, 0, .22); text-align: center; }
.trade .k { font-family: var(--head); font-size: .68rem; letter-spacing: .18em;
            text-transform: uppercase; color: var(--seafoam); margin: 0; }
.trade .v { font-family: var(--display); font-size: 2rem; line-height: 1.05;
            color: var(--ivory); margin: 2px 0; }
.trade .get .v { color: var(--tiffany); }
.trade .u { font-size: .74rem; color: var(--seafoam); margin: 0; }

.blocklabel { font-family: var(--head); font-size: .7rem; letter-spacing: .2em;
              text-transform: uppercase; color: var(--seafoam); margin: 0 0 8px; }

.reqlist { list-style: none; margin: 0 0 18px; padding: 0; }
.reqlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0;
              border-bottom: 1px solid var(--hairline); color: var(--ivory);
              font-size: .97rem; }
.reqlist li:last-child { border-bottom: 0; }
.reqlist .tag { margin-left: auto; font-family: var(--head); font-size: .66rem;
                letter-spacing: .12em; text-transform: uppercase;
                padding: 3px 9px; border-radius: 999px; color: var(--seafoam);
                border: 1px solid var(--hairline); }
.reqlist .tag.floating { color: var(--tiffany); border-color: var(--card-edge); }

.why { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 18px; }
.why b { font-family: var(--head); font-weight: 500; font-size: .84rem;
         letter-spacing: .04em; padding: 6px 11px; border-radius: 8px;
         background: rgba(0, 0, 0, .25); color: var(--body); }
.why b.spend { background: rgba(129, 216, 208, .16); color: var(--tiffany); }
.why i { color: var(--seafoam); font-style: normal; }

.cardfoot { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; padding-top: 14px; border-top: 1px solid var(--hairline);
            font-size: .84rem; color: var(--seafoam); }
.cardfoot b { font-family: var(--head); color: var(--ivory); font-weight: 500; }
.dests { margin: 14px 0 0; font-size: .88rem; color: var(--body); }
.dests span { color: var(--seafoam); }

/* --- free / locked ------------------------------------------------------- */

.freebar { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
           border-radius: 12px; background: rgba(129, 216, 208, .08);
           border: 1px solid var(--card-edge); font-size: .86rem; }

.lock {
  display: flex; align-items: center; gap: 14px; padding: 17px 20px;
  border-radius: 14px; margin: 0 0 10px;
  background: rgba(255, 255, 255, .025);
  border: 1px dashed rgba(129, 216, 208, .26);
}
.lock .m { font-family: var(--head); font-size: .88rem; letter-spacing: .16em;
           text-transform: uppercase; color: var(--ivory); flex: 0 0 auto; }
.lock .d { flex: 1; font-size: .88rem; color: var(--seafoam); }
.lock .d b { color: var(--tiffany); font-weight: 600; }
.lock .i { opacity: .55; }

.paywall {
  margin: 30px 0 0; padding: 28px 24px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(17, 118, 113, .3), rgba(4, 20, 26, .55));
  border: 1px solid var(--card-edge);
}
.paywall .display { font-size: 1.55rem; margin: 0 0 14px; }
.paywall ul { list-style: none; margin: 18px 0 24px; padding: 0; }
.paywall li { display: flex; gap: 11px; padding: 7px 0; font-size: .95rem; color: var(--body); }
.paywall li::before { content: "✓"; color: var(--tiffany); font-weight: 700; }
.paywall .price { font-family: var(--display); font-size: 3rem; color: var(--ivory);
                  line-height: 1; margin: 0; }
.paywall .once { font-size: .82rem; color: var(--seafoam); margin: 4px 0 20px; }

/* --- share card ---------------------------------------------------------- */

.sharecard {
  margin: 34px 0 0; padding: 30px 24px; border-radius: 20px; text-align: center;
  background: linear-gradient(158deg, var(--dusk), var(--night));
  border: 1px solid var(--card-edge);
}
.sharecard .n { font-family: var(--display); font-size: 4rem; color: var(--tiffany);
               line-height: .9; margin: 8px 0; }
.sharecard .l { font-family: var(--head); font-size: .72rem; letter-spacing: .2em;
                text-transform: uppercase; color: var(--seafoam); margin: 0; }
.sharecard .w { font-family: var(--head); font-size: .7rem; letter-spacing: .34em;
                text-transform: uppercase; color: var(--ivory); margin-top: 18px; opacity: .8; }

/* --- notes / footer ------------------------------------------------------ */

.notes { margin: 34px 0 0; padding: 18px 20px; border-radius: 14px;
         background: rgba(0, 0, 0, .22); }
.notes p { margin: 0 0 9px; font-size: .82rem; color: var(--seafoam); line-height: 1.5; }
.notes p:last-child { margin: 0; }

.foot { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline);
        font-size: .78rem; color: var(--seafoam); text-align: center; }

.flash { padding: 13px 18px; border-radius: 12px; margin: 0 0 22px; font-size: .9rem;
         background: rgba(129, 216, 208, .1); border: 1px solid var(--card-edge);
         color: var(--body); }

/* --- desktop: widen, do not redesign ------------------------------------- */

@media (min-width: 720px) {
  body { font-size: 18px; }
  .wrap, .masthead { max-width: 640px; }
  .hero { padding-top: 56px; }
  .btn { width: auto; min-width: 260px; display: inline-block; }
  .btn-row .btn { width: 100%; }
  .opts { grid-template-columns: 1fr 1fr; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #111; }
  .noprint { display: none !important; }
  .card { border: 1px solid #ccc; background: #fff; page-break-inside: avoid; }
  .card .len, .trade .v, .bignum, .mult .n { color: #111; }
  .card .dates, .trade .get .v { color: #0A7A74; }
  h1, h2, h3, .display, .reqlist li, .nm { color: #111; }
  .muted, .cardfoot, .basis, .blocklabel, .trade .k { color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* --- legal pages ---------------------------------------------------------
   Long-form prose, set for reading rather than scanning. Nobody enjoys these
   pages, but a refund policy nobody can read is a refund policy nobody
   trusts. */

.legal { max-width: 62ch; }
.legal h2 { font-size: 1.08rem; margin: 32px 0 8px; color: var(--tiffany); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: .94rem; color: var(--body); }
.legal ul { padding-left: 20px; }
.legal li { margin: 0 0 7px; }
.legal code { font-size: .85em; padding: 2px 6px; border-radius: 5px;
              background: rgba(0, 0, 0, .3); color: var(--tiffany); }
.legal strong { color: var(--ivory); }