/* ============================================================
   OffGrid — Daily motivation push (extends site.css)
   ============================================================ */

.daily-hero { padding-top: clamp(40px,7vw,84px); padding-bottom: clamp(8px,3vw,28px); }
.daily-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,64px); align-items: center; }
.daily-hero .lock-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  border-radius: 100px; padding: 6px 13px;
}
.daily-hero .lock-badge svg { width: 13px; height: 13px; }
.daily-hero h1 { font-size: clamp(2.4rem,5.6vw,4.3rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-top: 6px; text-wrap: balance; }
.daily-hero h1 .hl { color: var(--acc); }
.daily-hero .sub { color: var(--ink-2); font-size: clamp(1.05rem,1.5vw,1.25rem); margin-top: 24px; max-width: 46ch; text-wrap: pretty; }
.daily-hero .hcta { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }

/* ---- phone notification mock --------------------------- */
.phone {
  width: min(320px, 100%); margin: 0 auto; position: relative;
  border-radius: 38px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 8px #060608, 0 0 0 9px var(--line);
  padding: 18px 14px 26px; overflow: hidden;
}
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background: #060608; border-radius: 100px; z-index: 3; }
.phone-time { text-align: center; padding: 26px 0 4px; }
.phone-time .pt-h { font-size: 50px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.phone-time .pt-d { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); letter-spacing: .08em; margin-top: 8px; text-transform: uppercase; }

.noti-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.noti {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(28,28,34,.78); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: 18px; padding: 13px 14px;
  animation: notiIn .5s cubic-bezier(.2,.8,.3,1) both;
}
.noti.b { animation-delay: .1s; }
.noti.c { animation-delay: .2s; opacity: .55; transform: scale(.96); }
@keyframes notiIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .noti { animation: none; } }
.noti .ni { width: 34px; height: 34px; border-radius: 9px; background: var(--acc); color: #04130a; display: grid; place-items: center; flex: none; }
.noti .ni svg { width: 19px; height: 19px; }
.noti .nbody { min-width: 0; flex: 1; }
.noti .nhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.noti .nhead .app { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.noti .nhead .ago { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.noti .ntext { font-size: 13px; color: var(--ink); margin-top: 4px; line-height: 1.4; text-wrap: pretty; }

/* ============================================================
   Live demo + settings
   ============================================================ */
.demo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }

.settings-card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden;
}
.sc-head { padding: 22px 26px; border-bottom: 1px solid var(--line); background: var(--bg-2); display: flex; align-items: center; gap: 14px; }
.sc-head .sh-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--bg-3); color: var(--acc); display: grid; place-items: center; flex: none; }
.sc-head .sh-ic svg { width: 22px; height: 22px; }
.sc-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.sc-head p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.sc-body { padding: 8px 26px 24px; }

.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.opt:last-child { border-bottom: none; }
.opt .ol { font-size: 15px; font-weight: 600; }
.opt .od { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; max-width: 42ch; text-wrap: pretty; }

/* toggle */
.tgl { width: 46px; height: 27px; border-radius: 100px; background: var(--bg-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; flex: none; transition: background .18s, border-color .18s; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink-3); transition: transform .18s, background .18s; }
.tgl.on { background: var(--acc); border-color: var(--acc); }
.tgl.on::after { transform: translateX(19px); background: #04130a; }
.tgl.disabled { opacity: .4; pointer-events: none; }

/* time input */
.time-in { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); font-family: var(--font-mono); font-size: 15px; padding: 9px 13px; outline: none; color-scheme: dark; }
.time-in:focus { border-color: var(--acc); }
.time-in:disabled { opacity: .4; }

/* frequency segmented */
.freq { display: inline-flex; border: 1px solid var(--line-2); border-radius: 100px; padding: 3px; }
.freq button { padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--ink-3); transition: .15s; white-space: nowrap; }
.freq button.on { background: var(--acc); color: #04130a; }
.freq.disabled { opacity: .4; pointer-events: none; }

/* permission / consent banner */
.consent {
  display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 4px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 18px 20px;
}
.consent.granted { border-color: color-mix(in srgb, var(--acc) 40%, transparent); background: var(--acc-dim); }
.consent.denied { border-color: color-mix(in srgb, var(--acc-2) 40%, transparent); }
.consent .ci { flex: none; margin-top: 1px; }
.consent.granted .ci { color: var(--acc); }
.consent.denied .ci { color: var(--acc-2); }
.consent .ci svg { width: 20px; height: 20px; }
.consent .ctxt { flex: 1; }
.consent .ctitle { font-size: 14.5px; font-weight: 600; }
.consent .cmsg { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.consent .cbtn { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #04130a; background: var(--acc); border-radius: 100px; padding: 9px 16px; }
.consent .cbtn svg { width: 14px; height: 14px; }

/* test send button */
.test-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.test-row .btn { flex: 1; min-width: 160px; }

/* ---- preview card -------------------------------------- */
.preview-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; position: sticky; top: 88px; }
.preview-card .pc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.live-noti {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 16px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px;
  transition: transform .25s;
}
.live-noti .ni { width: 38px; height: 38px; border-radius: 10px; background: var(--acc); color: #04130a; display: grid; place-items: center; flex: none; }
.live-noti .ni svg { width: 21px; height: 21px; }
.live-noti .lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-noti .app { font-size: 13px; font-weight: 700; }
.live-noti .ago { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.live-noti .ltext { font-size: 14px; color: var(--ink); margin-top: 5px; line-height: 1.45; min-height: 40px; text-wrap: pretty; }
.area-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.area-row .area { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-family: var(--font-mono); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 11px; cursor: pointer; transition: .15s; }
.area-row .area:hover { border-color: var(--acc); color: var(--ink); }
.area-row .area .dot { width: 7px; height: 7px; border-radius: 50%; }
.area-row .area.body .dot { background: var(--acc); }
.area-row .area.nutri .dot { background: #6ad6a0; }
.area-row .area.mind .dot { background: var(--acc-2); }
.area-row .area.money .dot { background: #ffa066; }
.pc-cycle { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--acc); cursor: pointer; }
.pc-cycle svg { width: 15px; height: 15px; transition: transform .4s; }
.pc-cycle:hover svg { transform: rotate(180deg); }

/* ============================================================
   Tone principles
   ============================================================ */
.tone-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tone { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 26px 24px; }
.tone.good { border-color: color-mix(in srgb, var(--acc) 22%, transparent); }
.tone .ti { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; }
.tone.good .ti { background: var(--acc-dim); color: var(--acc); }
.tone.bad .ti { background: var(--acc2-dim); color: var(--acc-2); }
.tone .ti svg { width: 20px; height: 20px; }
.tone h4 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.tone p { color: var(--ink-2); font-size: 14px; margin-top: 9px; text-wrap: pretty; }

/* goal-aware highlight */
.goal-noti {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  margin-top: 18px; padding: clamp(26px,3vw,38px);
  background: radial-gradient(120% 120% at 0% 0%, var(--acc-dim), transparent 55%), var(--bg-1);
  border: 1px solid var(--line-2); border-radius: var(--r-l);
}
.goal-noti .gk { width: 56px; height: 56px; border-radius: 16px; background: var(--acc); color: #04130a; display: grid; place-items: center; flex: none; }
.goal-noti .gk svg { width: 28px; height: 28px; }
.goal-noti h3 { font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight: 700; letter-spacing: -0.03em; }
.goal-noti p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; max-width: 56ch; text-wrap: pretty; }
.goal-noti .gquote { color: var(--acc); font-style: italic; }

/* tie-in band */
.tie { border: 1px solid var(--line-2); border-radius: var(--r-l); background: radial-gradient(120% 120% at 50% -10%, var(--acc-dim), transparent 55%), var(--bg-1); padding: clamp(36px,5vw,64px); text-align: center; }
.tie h2 { font-size: clamp(1.8rem,4vw,2.9rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; max-width: 24ch; margin: 0 auto; }
.tie p { color: var(--ink-2); font-size: 1.08rem; margin: 20px auto 0; max-width: 54ch; text-wrap: pretty; }
.tie .tcta { display: flex; gap: 13px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .daily-hero-grid { grid-template-columns: 1fr; }
  .daily-hero .phone { max-width: 300px; }
  .demo-grid { grid-template-columns: 1fr; }
  .preview-card { position: static; }
  .tone-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .goal-noti { grid-template-columns: 1fr; }
  .opt { flex-wrap: wrap; }
}