/* Ask LUUK · site styles
   Layout idea: every page is a columnar ledger pad.
   index column | particulars | amount column, with a double marigold margin rule. */

:root{
  --paper:#FBFBF8;
  --mist:#EEF3F0;
  --ink:#16302E;
  --slate:#566865;
  --rule:#CFD9D4;
  --marigold:#D9960F;
  --margin-line:rgba(217,150,15,.62);
  --total-line:#16302E;
  --field-line:#8FA39D;
  --btn-bg:#16302E;
  --btn-fg:#FBFBF8;
  --btn-hover:#24453F;
  --logo-ink:#16302E;
  --shadow:rgba(22,48,46,.10);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",Arial,Helvetica,sans-serif;
  --thai:"Noto Serif Thai","Newsreader",Georgia,serif;
  --gut:16px;
  --idx:150px;
  --amt:240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0F2422;--mist:#16302E;--ink:#EEF3F0;--slate:#A7BAB4;--rule:#29463F;
    --marigold:#E2A42B;--margin-line:rgba(226,164,43,.5);--total-line:#EEF3F0;--field-line:#4E6E68;
    --btn-bg:#E2A42B;--btn-fg:#16302E;--btn-hover:#EEB850;--logo-ink:#FBFBF8;--shadow:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F2422;--mist:#16302E;--ink:#EEF3F0;--slate:#A7BAB4;--rule:#29463F;
  --marigold:#E2A42B;--margin-line:rgba(226,164,43,.5);--total-line:#EEF3F0;--field-line:#4E6E68;
  --btn-bg:#E2A42B;--btn-fg:#16302E;--btn-hover:#EEB850;--logo-ink:#FBFBF8;--shadow:rgba(0,0,0,.45);
}
@media (min-width:700px){:root{--gut:28px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;font-optical-sizing:auto}
p,dl,dd,ol,ul,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--marigold);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:100px}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:60;background:var(--btn-bg);color:var(--btn-fg);padding:10px 14px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}

/* Logo */
.logo{display:block;width:156px;height:auto}
.logo .st{fill:none;stroke:var(--logo-ink);stroke-width:5;stroke-linecap:round}
.logo .lf{fill:var(--marigold)}
.logo .ik{fill:var(--logo-ink)}
.logo .tx{fill:var(--logo-ink);font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.4px}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font:600 16px/1 var(--sans);padding:14px 24px;border:0;border-radius:2px;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:translateY(1px)}
.textlink{font-weight:600;font-size:16px;text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .15s}
.textlink:hover{text-decoration-color:currentColor}
.inline{text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:1.5px;text-underline-offset:3px}
.inline:hover{text-decoration-color:currentColor}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.masthead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;padding-block:22px 20px;transition:padding .3s var(--ease)}
/* The ledger heading rule: a double line drawn left to right on load */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-top:1px solid var(--total-line);border-bottom:1px solid var(--total-line);transform-origin:left center;animation:rule-across .9s .05s var(--ease) both}
.site-header.is-scrolled .masthead{padding-block:12px 12px}
.site-header.is-scrolled{box-shadow:0 10px 24px -22px var(--shadow)}
.brand{display:block;border-radius:2px}
.site-header .logo{transition:width .3s var(--ease)}
.site-header.is-scrolled .logo{width:134px}
.nav{display:flex;align-items:center;gap:8px 30px}
.nav a:not(.btn){position:relative;text-decoration:none;font-size:15px;color:var(--slate);padding-block:6px;transition:color .15s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--marigold);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.menu-btn{display:none}
.menu-panel{display:none}

@keyframes rule-across{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes flip{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Hero entrance */
.rise{animation:rise .75s var(--ease) both}
.d1{animation-delay:.12s}.d2{animation-delay:.24s}.d3{animation-delay:.36s}.d4{animation-delay:.48s}

/* ---------- The columnar sheet ---------- */
.sheet{
  background:
    linear-gradient(var(--margin-line),var(--margin-line)) no-repeat calc(var(--gut) + var(--idx) - 4px) 0 / 1px 100%,
    linear-gradient(var(--margin-line),var(--margin-line)) no-repeat calc(var(--gut) + var(--idx)) 0 / 1px 100%,
    linear-gradient(var(--rule),var(--rule)) no-repeat right calc(var(--gut) + var(--amt)) top 0 / 1px 100%;
}
.row{display:grid;grid-template-columns:var(--idx) minmax(0,1fr) var(--amt);padding-block:22px}
.row>.i{padding-right:22px;display:flex;justify-content:flex-end;align-items:flex-start;text-align:right}
.row>.m{padding-inline:32px;min-width:0}
.row>.a{padding-left:24px;min-width:0}
.line{border-bottom:1px solid var(--rule)}
.r{text-align:right}

.note{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:16px;line-height:1.35}
.sub{color:var(--slate);font-size:16px;margin-top:3px;max-width:60ch}
.small{font-size:15px;color:var(--slate);max-width:62ch}
.mlabel{display:none}

/* Hero */
.hero{padding-block:76px 64px}
.hero.compact{padding-block:60px 40px}
.hero .i .note{margin-top:16px}
h1{font-size:clamp(42px,6.2vw,72px);line-height:1.02;letter-spacing:-.015em;max-width:15ch}
.compact h1{font-size:clamp(38px,5vw,58px);max-width:18ch}
.lede{font-size:19px;line-height:1.55;margin-top:26px;max-width:46ch}
.ctas{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;margin-top:34px}
.glance{display:grid;border-top:1px solid var(--rule);margin-top:10px}
.glance>div{padding-block:14px;border-bottom:1px solid var(--rule);text-align:right}
.glance dt{font-size:14px;color:var(--slate)}
.glance dd{font-family:var(--serif);font-size:25px;line-height:1.2;margin-top:2px}
.glance small{font-size:15px;color:var(--slate);font-family:var(--sans)}

/* Section heads */
.head{padding-block:84px 14px;border-bottom:1px solid var(--total-line);align-items:end}
.head h2{font-size:clamp(29px,3.4vw,38px);line-height:1.15;letter-spacing:-.01em}
.head .sub{margin-top:10px}
.colhead{font-size:14px;color:var(--slate);align-self:end}
.head.tight{padding-block:20px 12px}

/* Rows */
h3{font-size:22px;line-height:1.3}
.inc{font-size:15.5px;padding-top:4px}
.inc small{display:block;font-size:13.5px;color:var(--slate);margin-top:2px}
.step{font-family:var(--serif);font-size:38px;line-height:.95;font-variant-numeric:lining-nums}

/* Plans */
.plan-name .desc{font-family:var(--sans);font-size:15px;color:var(--slate);font-weight:400;margin-left:10px;letter-spacing:0}
.price{font-family:var(--serif);font-size:34px;line-height:1}
.price .from,.price .per{font-family:var(--sans);font-size:14px;color:var(--slate)}
.price .from{margin-right:6px}
.popular{display:inline-flex;align-items:center;gap:6px}
.leafmark{width:16px;height:12px;fill:var(--marigold);flex:none}
.fig{display:inline-block}
.fig.flip{animation:flip .35s var(--ease)}
.save{font-size:13.5px;line-height:1.4;color:var(--slate);margin-top:8px;margin-left:auto;max-width:22ch}
.incl{margin-top:8px}
.incl li{position:relative;padding-left:18px;font-size:16px;color:var(--slate);margin-top:3px}
.incl li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--slate)}
.incl li.plus{padding-left:0;color:var(--ink);font-weight:600;font-size:15px}
.incl li.plus::before{display:none}
.terms-toggle{display:inline-flex;flex-wrap:wrap;margin-top:18px;border:1px solid var(--total-line);border-radius:2px}
.terms-toggle label{position:relative;cursor:pointer}
.terms-toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.terms-toggle span{display:block;padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--slate);transition:background .2s,color .2s}
.terms-toggle label+label span{border-left:1px solid var(--total-line)}
.terms-toggle input:checked+span{background:var(--btn-bg);color:var(--btn-fg)}
.terms-toggle input:focus-visible+span{outline:2px solid var(--marigold);outline-offset:2px}
.fine li{font-size:15px;color:var(--slate);margin-top:4px;max-width:64ch}
.fine li:first-child{margin-top:0}

/* Sample report */
.rtitle{font-family:var(--serif);font-size:21px;line-height:1.3}
.rtitle span{display:block;font-family:var(--sans);font-size:14px;color:var(--slate);margin-top:2px}
.rline{padding-block:14px}
.rline .item{font-size:17px}
.rline .anno{font-family:var(--serif);font-style:italic;color:var(--slate);font-size:16px;line-height:1.4;margin-top:3px;max-width:52ch}
.amt{font-size:17px}
.total .item{font-weight:600}
.total .amt{display:inline-block;font-weight:600;padding-block:4px 3px;border-top:1px solid var(--total-line);border-bottom:3px double var(--total-line)}

/* Reviewer's tick: drawn in when it scrolls into view */
.tick{width:22px;height:22px;fill:none;stroke:var(--marigold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px}
.tick path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .55s var(--ease)}
.tick.pending path{stroke-dashoffset:1}

/* Promises */
.promise p{font-size:18px;max-width:58ch}
.promise strong{font-family:var(--serif);font-weight:500;font-size:21px}

/* Prose (About) */
.prose p{font-size:19px;line-height:1.65;max-width:58ch}
.thai{font-family:var(--thai);font-weight:500;font-size:clamp(96px,14vw,168px);line-height:1.05;color:var(--ink)}
.name-block{display:flex;align-items:flex-end;gap:12px 32px;flex-wrap:wrap}
.pron{font-size:17px;color:var(--slate);max-width:30ch;padding-bottom:22px}
.term{font-family:var(--serif);font-size:30px;line-height:1.1}
.seedmark{width:54px;height:54px;display:block}
.seedmark .st{fill:none;stroke:var(--logo-ink);stroke-width:5;stroke-linecap:round}
.seedmark .lf{fill:var(--marigold)}
.seedmark .ik{fill:var(--logo-ink)}
.signoff{font-family:var(--serif);font-style:italic;font-size:19px}

/* Closing */
.close{padding-block:96px 88px}
.close h2{font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.015em;max-width:16ch}
.close p.lede{margin-top:18px}
.contact dt{font-size:14px;color:var(--slate)}
.contact dd{font-size:16px;margin-bottom:12px;user-select:all}

/* ---------- Forms ---------- */
.fld label.lbl,.fld legend.lbl{display:block;font-weight:600;font-size:15.5px;margin-bottom:6px;padding:0}
.opt{font-weight:400;color:var(--slate);font-size:14px;margin-left:6px}
.fld input[type="text"],.fld input[type="email"],.fld select{width:100%;max-width:520px;background-color:transparent;border:0;border-bottom:1px solid var(--field-line);border-radius:0;color:var(--ink);font:18px/1.4 var(--sans);padding:8px 0;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus{outline:none;border-bottom-color:var(--marigold);box-shadow:0 1px 0 var(--marigold)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld textarea{display:block;width:100%;max-width:640px;min-height:160px;border:1px solid var(--field-line);border-radius:2px;color:var(--ink);font:17px/32px var(--sans);padding:0 12px;resize:vertical;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px) var(--paper);background-attachment:local;transition:border-color .2s,box-shadow .2s}
.fld textarea:focus{outline:none;border-color:var(--marigold);box-shadow:0 0 0 1px var(--marigold)}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.choice{display:flex;align-items:center;gap:11px;font-size:17px;cursor:pointer;width:fit-content}
.choice input{width:18px;height:18px;margin:0;accent-color:var(--btn-bg);flex:none}
.help{font-size:14.5px;line-height:1.45;color:var(--slate)}
.formnote{font-size:14.5px;color:var(--slate);margin-top:16px;max-width:52ch}
.hp{position:absolute;left:-9999px}
.submit-row{padding-block:30px 40px}

/* ---------- Legal ---------- */
.clause .cl-num{font-family:var(--serif);font-size:26px;line-height:1.15;font-variant-numeric:lining-nums}
.clause h2{font-size:23px;line-height:1.3;margin-bottom:8px}
.clause .m p,.clause .m li{max-width:64ch}
.clause .m p+p,.clause .m p+ul,.clause .m ul+p{margin-top:10px}
.bul li{position:relative;padding-left:18px;margin-top:6px}
.bul li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:1px;background:var(--slate)}
.inshort{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--slate)}
.inshort .lab{display:none;font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:3px}
mark.fill{background:var(--mist);color:var(--ink);border-bottom:2px dotted var(--marigold);padding:0 3px}

/* ---------- Footer ---------- */
.site-footer{margin-top:0}
.foot{border-top:3px double var(--total-line);padding-block:34px 18px}
.foot .logo{width:128px}
.foot .tag{font-size:15px;color:var(--slate);margin-top:10px}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px}
.flinks a{font-size:15px;text-decoration:none;color:var(--slate)}
.flinks a:hover{color:var(--ink);text-decoration:underline}
.legal-row{padding-block:10px 44px}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:10px}
.legal-links a{font-size:14px;color:var(--slate)}
.legal-row p{font-size:13.5px;color:var(--slate);max-width:70ch}

/* ---------- Narrow screens ---------- */
@media (max-width:860px){
  :root{--idx:0px;--amt:0px}
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--rule);color:var(--ink);font:600 15px/1 var(--sans);padding:10px 14px;border-radius:2px;cursor:pointer}
  .bars{position:relative;width:18px;height:10px}
  .bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
  .bars::before{top:0}.bars::after{top:8px}
  .menu-open .bars::before{top:4px;transform:rotate(45deg)}
  .menu-open .bars::after{top:4px;transform:rotate(-45deg)}
  .menu-panel{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 22px 30px -24px var(--shadow);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
  .menu-open .menu-panel{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .3s var(--ease)}
  .menu-panel li a{display:block;padding:14px 0 14px 22px;border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--serif);font-size:23px;
    background:linear-gradient(var(--margin-line),var(--margin-line)) no-repeat 0 0 / 1px 100%,linear-gradient(var(--margin-line),var(--margin-line)) no-repeat 4px 0 / 1px 100%}
  .menu-panel li a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:2px;text-underline-offset:6px}
  .menu-panel li{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease)}
  .menu-open .menu-panel li{opacity:1;transform:none}
  .menu-open .menu-panel li:nth-child(2){transition-delay:.04s}
  .menu-open .menu-panel li:nth-child(3){transition-delay:.08s}
  .menu-open .menu-panel li:nth-child(4){transition-delay:.12s}
  .menu-panel .btn{margin:20px 0 24px 22px}

  .sheet{
    background:
      linear-gradient(var(--margin-line),var(--margin-line)) no-repeat var(--gut) 0 / 1px 100%,
      linear-gradient(var(--margin-line),var(--margin-line)) no-repeat calc(var(--gut) + 4px) 0 / 1px 100%;
  }
  .row{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .row>.i,.row>.m,.row>.a{padding-inline:22px 0}
  .row>.i{justify-content:flex-start;text-align:left}
  .row>.i:empty,.row>.a:empty{display:none}
  .r{text-align:left}
  .save{margin-left:0;max-width:none}
  .mlabel{display:inline;color:var(--slate)}
  .colhead{display:none}
  .glance{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0;margin-top:20px;gap:12px}
  .glance>div{text-align:left;border-bottom:0;border-top:1px solid var(--rule);padding-block:10px 0}
  .glance dd{font-size:19px}
  .glance small{font-size:13px}
  .hero{padding-block:48px 40px}
  .hero.compact{padding-block:40px 28px}
  .hero .i .note{margin-top:0}
  .head{padding-block:64px 12px}
  .head.tight{display:none}
  .inshort .lab{display:block}
  .pair{grid-template-columns:58px minmax(0,1fr);column-gap:0}
  .pair>.i{padding-inline:22px 0;grid-row:span 2}
  .pair:has(>.a:empty)>.i{grid-row:auto}
  .pair>.m,.pair>.a{padding-inline:0;grid-column:2}
  .pair .inc{padding-top:0;color:var(--slate)}
  .keep{grid-template-columns:48px minmax(0,1fr) auto;column-gap:0}
  .keep>.i{padding-inline:22px 0}
  .keep>.m{padding-inline:4px 12px}
  .keep>.a{padding-inline:0;text-align:right}
  .keep>.i:empty{display:flex}
  .close{padding-block:64px}
  .price-row .a{display:flex;align-items:baseline;gap:4px 14px;flex-wrap:wrap}
  .price-row .save{margin-top:0}
  .fld-row .a .help{margin-top:-2px}
  .thai{font-size:112px}
}
@media (max-width:460px){
  .glance{grid-template-columns:minmax(0,1fr)}
  .terms-toggle{display:flex}
  .terms-toggle label{flex:1 1 auto}
  .terms-toggle span{padding:9px 10px;text-align:center;font-size:14px}
  .logo{width:140px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tick.pending path{stroke-dashoffset:0}
}