/* Everyday Insight tool site template. Loaded after styles.css, so the tool's
   own components pick up the family colors and fonts through the variables. */
:root{
  --petrol:#19536b;--deep:#0d3646;--paper:#fdfcf7;--sun:#f3cf48;--mist:#c3d3da;--ochre:#86660a;--brick:#b8352b;
  --teal:#19536b;--teal-deep:#0d3646;--sea:#19536b;--sea-tint:#e8eff2;
    --ink:#0d3646;--ink-soft:#486470;--rule:#d0d8dc;--sand:#fdfcf7;--sand-deep:#f4f2ea;--cream:#ffffff;
  --card:#ffffff;--card-line:#e3e9ec;--chip:#19536b;--chip-ink:#fdfcf7;--top:#19536b;
  --line:#d0d8dc;--track:#dfe6e9;
  /* Rating ramp for amounts and intensity, with the ink that reads on each step */
  --r1:#dee9ed;--r2:#b6ced8;--r3:#7ca4b6;--r4:#407c96;--r5:#19536b;--r-empty:#eef1f2;
  --r1-ink:#0d3646;--r2-ink:#0d3646;--r3-ink:#0d3646;--r4-ink:#fdfcf7;--r5-ink:#fdfcf7;
  --serif:Literata,Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --max:72.5rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --teal:#90c0d5;--teal-deep:#0c2632;--sea:#90c0d5;--sea-tint:#16394a;
  --ink:#fdfcf7;--ink-soft:#c3d3da;--rule:#2a5a70;--sand:#0c2632;--sand-deep:#102f3d;--cream:#123747;
  --card:#123747;--card-line:#204b5e;--chip:#90c0d5;--chip-ink:#0c2632;--top:#123f52;--brick:#f07a6d;
  --line:#2a5a70;--track:#2a5a70;
  --r1:#23586e;--r2:#3d7a94;--r3:#6c9db3;--r4:#a3c5d4;--r5:#dcebf1;--r-empty:#16394a;
  --r1-ink:#fdfcf7;--r2-ink:#fdfcf7;--r3-ink:#0c2632;--r4-ink:#0c2632;--r5-ink:#0c2632;color-scheme:dark}}
:root[data-theme=dark]{
  --teal:#90c0d5;--teal-deep:#0c2632;--sea:#90c0d5;--sea-tint:#16394a;
  --ink:#fdfcf7;--ink-soft:#c3d3da;--rule:#2a5a70;--sand:#0c2632;--sand-deep:#102f3d;--cream:#123747;
  --card:#123747;--card-line:#204b5e;--chip:#90c0d5;--chip-ink:#0c2632;--top:#123f52;--brick:#f07a6d;
  --line:#2a5a70;--track:#2a5a70;
  --r1:#23586e;--r2:#3d7a94;--r3:#6c9db3;--r4:#a3c5d4;--r5:#dcebf1;--r-empty:#16394a;
  --r1-ink:#fdfcf7;--r2-ink:#fdfcf7;--r3-ink:#0c2632;--r4-ink:#0c2632;--r5-ink:#0c2632;color-scheme:dark}

body{font-family:var(--sans);font-size:1.125rem;line-height:1.6;font-variant-numeric:lining-nums}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;text-wrap:balance;letter-spacing:0}
a{color:var(--sea)}
a:hover{color:var(--ink)}
.fig{font-variant-numeric:lining-nums tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);padding:0 clamp(16px,4vw,48px)}
.skip-link{border-color:var(--petrol)}

/* header: navy band on every page, the home page continues it into the hero */
.site-top{background:var(--top);color:var(--paper);position:relative}
.bar-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px;flex-wrap:nowrap}
.tbrand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.tbrand:hover{color:var(--paper)}
.tbrand .ti{height:44px;width:44px;border-radius:10px;box-shadow:0 0 0 1.5px rgba(253,252,247,.35);flex:none}
.tbrand b{display:block;font:500 1.3125rem/1.1 var(--serif)}
.tbrand small{display:block;font:500 0.8125rem/1.3 var(--sans);color:var(--mist);margin-top:3px}
.tbrand a{color:inherit;text-decoration:none}
.tbrand .tb-tile{display:flex;flex:none}
.tbrand .tb-name:hover,.tbrand small a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.site-top nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-weight:500;font-size:1rem}
.site-top nav a{color:var(--mist);text-decoration:none;white-space:nowrap}
.site-top nav a:hover,.site-top nav a[aria-current=page]{color:var(--paper)}
.site-top nav a[aria-current=page]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
.nl{display:flex;gap:22px;flex-wrap:wrap}
.lang{display:flex;gap:10px;align-items:center;color:var(--mist)}
.lang b{color:var(--paper);font-weight:500;border-bottom:3px solid var(--paper);line-height:1.4}
.menu,.menu:last-of-type{display:none;position:relative;border:0;padding:0}
.menu summary{list-style:none;cursor:pointer;color:var(--paper);font-weight:500;padding:9px 12px;border:1.5px solid rgba(195,211,218,.5);border-radius:9px}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:none}
.menu-in{position:absolute;right:0;top:calc(100% + 8px);z-index:20;background:var(--deep);border-radius:12px;padding:8px;min-width:230px;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.menu-in a{padding:12px 14px;border-radius:8px;color:var(--paper)!important}
.menu-in a:hover{background:#19536b}
.thm select{font:500 0.875rem var(--sans);color:var(--paper);background:transparent;border:1.5px solid rgba(195,211,218,.5);border-radius:8px;padding:6px 8px;min-height:34px}
.thm option{color:#0d3646}
.site-top :focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
@media (max-width:1400px){html[lang=es] .nl{display:none}html[lang=es] .menu{display:block}html[lang=es] .site-top nav{gap:10px}}
@media (max-width:1040px){.nl{display:none}.menu,.menu:last-of-type{display:block}.site-top nav{gap:10px}}
@media (max-width:420px){.tbrand .ti{height:38px;width:38px}.tbrand b{font-size:1.125rem}.tbrand small{font-size:0.75rem}.thm select{font-size:0.8125rem;padding:6px 4px}}

/* home hero */
.hh-t h1{color:#c3d3da;font:600 clamp(0.9375rem,1.3vw,1.0625rem)/1.35 var(--sans);margin:0;padding:clamp(18px,3vw,34px) 0 0;max-width:none}
.hh-t .hh-d{color:var(--paper);font:500 clamp(2.375rem,5vw,3.875rem)/1.04 var(--serif);max-width:14ch;padding:10px 0 54px;margin:0}
.sunr{position:absolute;bottom:0;left:max(clamp(16px,4vw,48px),calc(50vw - 36.25rem + 48px));width:64px;height:32px;border-radius:64px 64px 0 0;background:var(--sun);animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(18px);clip-path:inset(0 0 60% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.sunr{animation:none}}
.hb{padding-bottom:clamp(24px,3vw,40px)}
.hb .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t c" "w c";gap:0 clamp(32px,4.5vw,72px)}
.hb .t{grid-area:t;padding-top:36px}
.hb .lead{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;color:var(--ink-soft);margin:0 0 26px;max-width:34em}
.acts{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.tl-link{color:var(--sea);font-weight:600;text-underline-offset:6px;text-decoration-thickness:2px}
.hb .note{margin:18px 0 0}
.hcard{grid-area:c;padding-top:36px}
.ways{grid-area:w;list-style:none;margin:30px 0 0;padding:0;align-self:start}
.ways li{padding:13px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:150px 1fr;gap:16px;margin:0}
.ways b{font:500 1.0625rem var(--serif)} .ways b a{color:var(--ink);text-underline-offset:4px} .ways span{color:var(--ink-soft);font-size:0.9688rem;line-height:1.5}
@media (max-width:860px){.hb .in{grid-template-columns:1fr;grid-template-areas:"t" "c" "w"}.hcard{padding-top:36px}.ways li{grid-template-columns:1fr;gap:2px}}

/* components from the tool, in the family style */
.btn{border-radius:10px;font-weight:600}
.btn.primary{background:var(--petrol);border-color:var(--petrol);color:var(--paper);padding:.8rem 1.3rem}
.btn.primary:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn.primary{background:#90c0d5;border-color:#90c0d5;color:#0c2632}:root:not([data-theme=light]) .btn.primary:hover{background:#c3d3da;color:#0c2632}}
:root[data-theme=dark] .btn.primary{background:#90c0d5;border-color:#90c0d5;color:#0c2632}:root[data-theme=dark] .btn.primary:hover{background:#c3d3da;color:#0c2632}
.hero{padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,32px)}
.hero h1{font-size:clamp(2.375rem,5vw,3.875rem);line-height:1.06;max-width:20ch}
.hero .lede{font-size:clamp(1.125rem,1.5vw,1.25rem)}
.section.deep{background:var(--petrol)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .section.deep{background:#1b4455}}
:root[data-theme="dark"] .section.deep{background:#1b4455}
.section.deep :focus-visible{outline-color:var(--sun)}

/* footer, as on the company site, with this site's own links first */
.foot{background:var(--deep);color:var(--mist);font-size:0.9375rem;margin-top:clamp(48px,6vw,80px)}
.foot a{color:var(--mist);text-underline-offset:3px;white-space:nowrap}
.foot a:hover{color:var(--paper)}
.foot-site{padding-top:36px;padding-bottom:4px;line-height:1.9}
.foot-site nav{color:var(--mist)}
.foot-site p{margin:.4rem 0 0}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:28px;padding-block:28px 32px;border-top:1px solid rgba(195,211,218,.22);margin-top:22px}
.foot-in img{height:34px;width:auto;display:block}
.fl{line-height:1.9}
.legal{padding-bottom:36px}
.legal p{margin:0;padding-top:18px;border-top:1px solid rgba(195,211,218,.22);font-size:0.875rem;line-height:1.6;max-width:62em;color:var(--mist)}
@media (max-width:860px){.foot-in{grid-template-columns:1fr}}
@media print{.site-top,.foot{display:none}}
@media (max-width:520px){.site-top nav{flex-wrap:nowrap;gap:8px}.tbrand{gap:10px;min-width:0}.tbrand .ti{width:38px;height:38px}.tbrand b{font-size:1.125rem}.menu summary{padding:8px 10px}.lang{gap:6px}}
@media (max-width:520px){.lang b{display:none}.tbrand small{font-size:0.7188rem;line-height:1.25}}
/* On a narrow phone the name and its attribution get the full width, and
   the controls sit on a row of their own under them. */
@media (max-width:440px){html[lang=es] .bar-top{flex-wrap:wrap;row-gap:12px;padding-block:16px}html[lang=es] .tbrand{flex:1 1 100%}html[lang=es] .site-top nav{flex:1 1 100%;justify-content:flex-end}}
.foot .marks{border-top:0;padding-top:10px;font-size:0.8125rem}

/* The page title sits the same distance below the header on every inner page.
   The home page keeps its own hero spacing. */
:root{--head-gap:clamp(44px,5.3vw,72px)}
main:not(:has(.hb)){padding-top:var(--head-gap)}
main:not(:has(.hb))>:first-child,
main:not(:has(.hb))>:first-child>:first-child,
main:not(:has(.hb))>:first-child>:first-child>:first-child,
main:not(:has(.hb))>:first-child>:first-child>:first-child>:first-child{margin-top:0;padding-top:0}

/* the home page's sample week, listed as the app's This week lists plans,
   with how each went and the week's counts under it. It sits on the page like
   the app's rows, with no card. */
.weekcard{margin:0;color:var(--ink)}
.weekcard figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 0.9375rem/1.4 var(--sans);color:var(--ink-soft);margin:0 0 10px}
.weekcard figcaption a{font-weight:600}
.sw-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.sw-rows li{display:grid;grid-template-columns:3.2rem 1fr;gap:12px;margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.sw-d{font:500 1rem/1.45 var(--serif);color:var(--ink-soft)}
.sw-p b{display:block;font-weight:400;font-size:1rem;line-height:1.45;color:var(--ink)}
.sw-p i{display:block;font-style:normal;font-size:0.9375rem;line-height:1.4;color:var(--ink-soft);margin-top:2px}
.sw-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.sw-res div{margin:0}
.sw-res dt{font-size:0.9375rem;line-height:1.3;color:var(--ink-soft)}
.sw-res dd{margin:0 0 2px;font:500 1.75rem/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.sw-res div{display:flex;flex-direction:column-reverse}

/* print: the Horizon frame, shared with every Everyday Insight PDF. The
   header and footer are a table's thead and tfoot, so Chromium repeats both
   on every page. The report inside is the app's own print.js and print.css. */
@media print{
  :root{color-scheme:light!important}
  html,body{background:transparent!important}
  .hz-doc{width:100%;border-collapse:collapse;border-spacing:0;color:#0d3646;font:400 10pt/1.45 "STP Sans","Source Sans 3",Helvetica,Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:left}
  .hz-doc>thead>tr>td,.hz-doc>tfoot>tr>td,.hz-doc>tbody>tr>td{padding:0;border:0;vertical-align:top}
  .hz-doc p{margin:0}
  .hz-head{position:relative;display:flex;align-items:flex-end;gap:10pt;padding-bottom:7pt;margin-bottom:10pt;border-bottom:1.6pt solid #0d3646}
  .hz-head .hz-tile{display:block;flex:none;width:.5in;height:.5in}
  .hz-head h1{flex:1;min-width:0;margin:0;font:500 22pt/1.05 "STP Serif",Literata,Georgia,serif;color:#0d3646}
  .hz-by{flex:none;margin:0 .56in 0 auto!important;text-align:right;font-size:8pt;line-height:1.35;color:#486470;white-space:nowrap}
  .hz-by b{display:block;font-weight:600;color:#0d3646}
  .hz-sun{position:absolute;right:.08in;bottom:0;width:.42in;height:.21in;border-radius:.42in .42in 0 0;background:#f3cf48}
  .hz-foot{display:flex;align-items:flex-end;gap:9pt;margin-top:10pt;padding-top:6pt;border-top:.6pt solid #d0d8dc;font-size:6.6pt;line-height:1.42;color:#486470;break-inside:avoid}
  .hz-foot .hz-mark{display:block;flex:none;height:22px;width:auto}
}

main:has(> .section.deep:last-child)+.foot{margin-top:0}

/* Footer, October 20, 2026: the dividers line up with the text, and the disclaimer and notices run the full width. */
.foot-in{border-top:0;position:relative}
.foot-in::before{content:"";position:absolute;top:0;left:clamp(16px,4vw,48px);right:clamp(16px,4vw,48px);border-top:1px solid rgba(195,211,218,.22)}
.legal p{max-width:none}