/* getdeduct.com: one stylesheet for every page.
   Pale pink ground and the red minus from the app icon. Every finance app is
   green; Deduct is red, because it is about what comes off. */

@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/zen-maru-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/zen-maru-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/zen-maru-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/zen-maru-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/zen-maru-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/zen-maru-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

:root{
  color-scheme:light dark;

  --ground:#F9EDED;
  --ink:#2B1B19;
  --secondary:#8A6F6C;
  --accent:#E72909;
  --rule:#EBD5D3;

  --body:'Zen Maru Gothic', ui-rounded, ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-label:0.8125rem;
  --t-small:1rem;
  --t-body:1.25rem;
  --t-tagline:clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --t-wordmark:clamp(2.25rem, 1.8rem + 1.8vw, 3rem);

  --text:40rem;
  --gap-section:5.5rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#1C1213;
    --ink:#F9EDED;
    --secondary:#B39A98;
    --accent:#FF5236;
    --rule:#3A2627;
  }
}
@media (max-width:480px){ :root{--gap-section:3rem;} }

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body);
  font-size:var(--t-body); line-height:1.5; -webkit-font-smoothing:antialiased;}

.page{max-width:calc(var(--text) + 2 * 24px); margin:0 auto;
  padding-block:clamp(3.5rem, 12vh, 7rem) 3rem;
  padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; gap:var(--gap-section); min-height:100vh;}

a{color:inherit; text-decoration:none; border-bottom:1px solid var(--rule);}
a:hover{border-bottom-color:var(--ink);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

.label{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); margin:0;}

/* Letterhead */
.wordmark{font-size:var(--t-wordmark); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:0;}
.tagline{margin:.6rem 0 0; font-size:var(--t-tagline); line-height:1.25; color:var(--secondary); text-wrap:balance;}
.lede{margin:1.5rem 0 0; font-size:var(--t-body); line-height:1.55; color:var(--ink); max-width:34rem; text-wrap:pretty;}

.icon{display:block; width:clamp(112px, 22vw, 136px); height:auto; aspect-ratio:1; border-radius:22.37%; margin:0 0 1.5rem; box-shadow:0 0 0 1px var(--rule), 0 6px 18px -10px rgba(120,40,30,.35);}

/* Receipts: slips stamped business or personal, filed one after another.
   Always under the letterhead, in the same column. */
.stack-wrap{--paper:#FFFCFA; --paper-ink:#2B1B19; --paper-faint:#9A8582;}
.stack{position:relative; height:24rem; width:min(23rem, 86%); margin-inline:auto;
  filter:drop-shadow(0 1px 1px rgba(70,25,20,.10)) drop-shadow(0 12px 18px rgba(70,25,20,.09));}
.slip{position:absolute; inset:0 0 auto 0; color:var(--paper-ink);
  /* Paper: a fine grain, a soft fold across the middle, and edges a shade warmer than the centre. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .22  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 44%, rgba(80,40,30,.025) 49.6%, rgba(255,255,255,.55) 50.2%, transparent 56%),
    radial-gradient(120% 90% at 50% 40%, var(--paper) 60%, #F6EEE9 100%);
  font-family:var(--mono); font-size:1rem; line-height:1.55; padding:1.5rem 1.5rem 6.5rem;
  --z:8px;
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--z)) 100%;
          mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2*var(--z)) 100%;
  box-shadow:inset 0 0 0 1px rgba(90,40,30,.10); /* a hairline edge keeps stacked receipts distinct */
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease, filter .7s ease;}
.slip[data-pos="0"]{transform:rotate(-2deg); z-index:3;}
.slip[data-pos="1"]{transform:translate(14px,10px) rotate(3.5deg); z-index:2; filter:brightness(.965);}
.slip[data-pos="2"]{transform:translate(-12px,18px) rotate(-6deg); z-index:1; filter:brightness(.93);}
.slip[data-pos="3"]{transform:translate(-8px,18px) rotate(-7deg); opacity:0; z-index:1;}
.slip[data-pos="out"]{transform:translate(70%,-30px) rotate(14deg); opacity:0; z-index:4;}
.slip p{margin:0;}
.slip dl, .slip .m{text-shadow:0 0 .4px rgba(43,27,25,.35);} /* thermal print, slightly soft */
.slip .m{text-align:center; font-weight:500; letter-spacing:.06em;}
.slip .d{text-align:center; color:var(--paper-faint); margin-bottom:.8rem;}
.slip dl{display:grid; grid-template-columns:1fr auto; gap:.1rem .75rem; margin:0; padding:.6rem 0; border-top:1px dashed #DCCBC8; font-variant-numeric:tabular-nums;}
.slip dd{margin:0; text-align:right;}
.slip .sum dt:last-of-type, .slip .sum dd:last-of-type{font-weight:500;}
/* The stamp lands once a receipt reaches the top of the pile. */
.stamp{position:absolute; right:1.1rem; bottom:1.6rem; transform:rotate(-9deg) scale(1.35);
  color:#E72909; border:2px solid #E72909; border-radius:4px; padding:.3rem .6rem;
  font-weight:500; font-size:1.1rem; line-height:1.25; text-transform:uppercase; letter-spacing:.04em; text-align:center; opacity:0;
  transition:transform .22s cubic-bezier(.3,1.4,.5,1) .55s, opacity .12s ease .55s;}
.slip[data-pos="0"] .stamp, .slip[data-pos="out"] .stamp{opacity:.88; transform:rotate(-9deg) scale(1);}
.stamp.personal{color:#6F5C59; border-color:#6F5C59;}
.filed{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:2rem auto 0; width:min(23rem, 100%);}
.tally{font-family:var(--mono); font-size:1.5rem; font-variant-numeric:tabular-nums;
  border-bottom:4px double var(--accent); padding-bottom:.15rem;} /* the bottom line, double-underlined like a ledger total */
.payoff{margin:2.5rem auto 0; max-width:32rem; text-align:center; font-size:var(--t-tagline); line-height:1.25; text-wrap:balance;}
/* Corner brackets: Japanese quotation marks, and the corners of a camera scanning a receipt. */
.payoff{position:relative; padding:1.4rem 1.8rem; max-width:min(25rem, 100%);}
.payoff::before, .payoff::after{content:""; position:absolute; width:1.1rem; height:1.1rem; border:0 solid var(--accent);}
.payoff::before{top:0; left:0; border-top-width:2px; border-left-width:2px;}
.payoff::after{bottom:0; right:0; border-bottom-width:2px; border-right-width:2px;}
@media (prefers-reduced-motion: reduce){ .slip, .stamp{transition:none;} }

/* Call to action */
.get{padding-block:.5rem 3rem;}
.soon{margin:0 0 1.5rem; color:var(--ink);}
.signup{display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end;}
.signup input[type=email]{flex:1 1 12rem; min-width:0; font:inherit; font-size:var(--t-body); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule); padding:.6rem 0; border-radius:0;}
.signup input[type=email]::placeholder{color:var(--secondary);}
.signup input[type=email]:focus{outline:none; border-bottom-color:var(--accent);}
.signup button{font-family:var(--mono); font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  background:var(--accent); color:#FFF; border:0; padding:1rem 1.6rem; border-radius:999px;}
.signup button[disabled]{opacity:.6; cursor:default;}
.hp{position:absolute; left:-9999px;}
.fine{font-size:var(--t-small); color:var(--secondary); margin:1rem 0 0;}
.fine.done{color:var(--ink);}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Signature divider: a paper clip. Each Plot Network app has its own. */
.sig{display:block; align-self:flex-start; height:22px; width:auto; color:var(--secondary); margin-top:auto; overflow:visible;
  transform:rotate(-28deg); transform-origin:30% 50%; margin-block:.75rem;}

/* Footer */
.footer{display:grid; gap:.9rem; font-size:var(--t-small); color:var(--secondary); margin-top:calc(-1 * var(--gap-section) + 1.5rem);}
.footer p{margin:0;}
.footer .links{display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;}
.footer .links a, .footer .copyright{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;}
.footer .links a{border-bottom-color:transparent;}
.footer .links a:hover, .footer .links a[aria-current="page"]{border-bottom-color:currentColor;}

.footer .social a{display:inline-flex; align-items:center; gap:.45rem; border-bottom-color:transparent;}
.footer .social a:hover{border-bottom-color:currentColor;}
.footer .glyph{width:.95rem; height:.95rem; flex:none;}

/* Inner pages */
.back{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--secondary); border:0;}
.masthead{display:grid; gap:.75rem;}
.masthead h1{font-size:var(--t-wordmark); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0;}
.doc{font-size:1rem;}
.doc h2{font-size:1rem; font-weight:600; margin:2rem 0 .5rem;}
.doc h2:first-child{margin-top:0;}
.doc p, .doc ul{margin:0 0 .75rem;}
.doc ul{padding-left:1.1rem;}
.doc li{margin-bottom:.4rem;}